<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
list-style:none;/*取消样式，序号*/
font-family: "微软雅黑";
/* text-shadow: #0000FF 5px 5px;*/
font-size:40px;/*字体大小
*/
}
.top-container {
100%;
height: 40px;
background-color: #66AFE9;
}
.top-nav {
600px;
height: 40px;
margin: 0px auto; /*居中*/
background-color: chartreuse;
}
.nav-btn-lv1 {
150px; /*分成4份*/
max-height: 40px;
background-color: burlywood;
float: left; /*流水布局*/
text-align: center;/*中间居中
*/ /*行高*/
line-height: 40px;/*行高跟顶上一样高
*/ overflow: hidden;/*超出部分隐藏*/
}
.nav-btn-lv1:hover{
max-height: 400px;/*鼠标小手*/
transition: 1s;/*过渡效果*/
cursor: pointer;/*鼠标小手*/
}
.nav-btn-lv1 li:hover{
background-color: yellow;
/* text-decoration: underline;*/
}
.nav-btn-lv1 ul{
opacity: 0.5;/*透明*/
}
.top-nav,.nav-btn-lv1{
border-radius: 10px; /*圆角*/
}
</style>
</head>
<body>
<div class="top-container">
<div class="top-nav">
<div class="nav-btn-lv1">导航1
<ul>
<li>导航A</li>
<li>导航B</li>
<li>导航C</li>
<li>导航D</li>
</ul>
</div>
<div class="nav-btn-lv1">导航2
<ul>
<li>导航A</li>
<li>导航B</li>
<li>导航C</li>
<li>导航D</li>
</ul>
</div>
<div class="nav-btn-lv1">导航3
<ul>
<li>导航A</li>
<li>导航B</li>
<li>导航C</li>
</ul>
</div>
<div class="nav-btn-lv1">导航4
<ul>
<li>导航A</li>
<li>导航B</li>
</ul>
</div>
</div>
</div>
</body>
</html>