<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>daohangtexiao</title>
<style>
*{
margin:0px;
padding:0px;
List-style:none; /* List serial number is set to no */
Font-family: "Microsoft Jas Black";
}
. top-container{
width:100%;
height:40px;
Background-color: #6FF;
}
. top-dao{
width:500px;
height:40px;
margin:0px Auto; /* Center */
}
. top-dao-1v1{
max-height:40px;
width:100px;
Text-align:center; /* Text horizontally centered */
line-height:40px; /* Font Line Height */
Overflow:hidden; /* Hide div*/
Float:left; /* Flow only left justified */
Background-color: #FF9;
}
. top-dao-1v1 ul{
opacity:0.5; /* Transparency Settings */
}
. top-dao-1v1. top-dao{
border-radius:10px; /* Corner set to ARC */
}
. top-dao-1v1:hover{
max-height:400px;
Cursor:pointer; /* Mouse Small hands */
Transition:1s; /* Transition effect settings */
}
. top-dao-1v1 li:hover{
Background:linear-gradient (to right, red, blue);/* Color transition */
}
</style>
<body>
<div class= "Top-container" >
<div class= "Top-dao" >
<div class= "top-dao-1v1" > Pit
<ul>
<li> Pit 1</li>
<li> Pit 1</li>
<li> Pit 1</li>
<li> Pit 1</li>
<li> Pit 1</li>
</ul>
</div>
<div class= "top-dao-1v1" > Deep Pits
<ul>
<li> Pit 1</li>
<li> Pit 1</li>
<li> Pit 1</li>
</ul>
</div>
<div class= "top-dao-1v1" > Very pit
<ul>
<li> very pit 1</li>
<li> very pit 1</li>
<li> very pit 1</li>
<li> very pit 1</li>
</ul>
</div>
<div class= "top-dao-1v1" > Pit point
<ul>
<li> Pit Point 1</li>
</ul>
</div>
<div class= "Top-dao-1v1" > is the Pit
<ul>
<li> is the pit 1</li>
<li> is the pit 1</li>
</ul>
</div>
</div>
</div>
</body>
Pull the drawing under the Guide line of CSS