下拉动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none; /*列表样式*/
font-family: "微软雅黑"; /*字体样式*/
text-shadow: #0000FF 5px 5px; /*字体阴影*/
}
.top-container /*容器*/{
width: 100%;
height: 40px;
background-color: #66AFE9;
}
.top-nav /*导航*/{
width: 600px;
height: 40px;
margin: 0px auto;
background-color: chartreuse;
}
.nav-btn-lv1 {
width: 150px;
max-height: 40px; /*max-___ 设置法可以随意调节*/
background-color: burlywood;
float: left;
text-align: center; /*文本对齐方式*/
/*行高*/
line-height: 40px; /*行高*/
overflow: hidden; /*超出部分隐藏*/
}
.nav-btn-lv1:hover{ /*hover 选择器用于选择鼠标指针浮动在上面的元素*/
/*最大高度*/
max-height: 400px;
/*过渡效果*/
transition: 1s; /*过渡，转变*/
/*鼠标小手*/
cursor: pointer; /*鼠标指向时显示小手 */
}
.nav-btn-lv1 li:hover{
background-color: yellow;
text-decoration: underline; /*text-decoration 属性规定添加到文本的修饰*/
} /*下划线*/
.nav-btn-lv1 ul{
opacity: 0.5; /*透明*/
}
.top-nav,.nav-btn-lv1{ /*两函数并列*/
/*元弧度*/ border-radius: 10px; /*border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。*/
} /*radius 桡骨; 半径范围; 半径（距离）; 用半径度量的圆形面积*/
</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>
