首页 > 代码库 > CSS写动态下拉菜单 -----2017-03-27
CSS写动态下拉菜单 -----2017-03-27
动态网站第一步：动态下拉菜单
关键点：
overflow:hidden
max-height
xx:hover {} 设置当鼠标移上之后的效果
transition: 设置过度时间
cursor: 设置鼠标效果
opacity: 设置透明度 0-1
如下图所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
list-style:none ;
font-family:"微软雅黑";
text-shadow: royalblue 5px 5px; /* 阴影*/
}
.top-nav,#nav-lv1{
border-radius: 10px; /*边框为圆形*/
}
.top-container{
width: 100%;
height:40px;
background-color: cyan;
position: relative;
}
.top-nav{
width: 600px;
height: 40px;
margin:0px auto; /*居中*/
position: relative;
}
#nav-lv1{
width: 150px;
max-height:40px; /*最大高度*/
background-color: palegreen;
float: left;
text-align: center;
vertical-position: middle;
line-height: 40px;
overflow: hidden; /*实现动态导航栏关键点*/
}
#nav-lv1:hover{
max-height: 400px; /*最大高度*/
transition: 1s; /*过度效果*/
cursor:pointer; /* 鼠标改小手*/
background: greenyellow;
}
#nav-lv1 li:hover{
background-color: greenyellow;
text-decoration: underline;
}
#nav-lv1 ul{
background-color: white;
opacity: 0.9; /* 设置透明度* 目的是防止挡住底下的文字/
}
</style>
</head>
<body>
<div class="top-container">
<div class="top-nav">
<div id="nav-lv1">HTML
<ul>
<li>1</li> <!--可换成<a></a>标签-->
<li>2</li>
<li>31</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">JavaScript
<ul>
<li>1</li>
<li>31</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">CSS
<ul>
<li>1</li>
<li>2</li>
<li>41</li>
</ul>
</div>
<div id="nav-lv1">Jquery
<ul>
<li>1</li>
<li>2</li>
<li>31</li>
<li>41</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS写动态下拉菜单 -----2017-03-27