用JavaScript+CSS制作下拉菜单

在这里插入图片描述
样例跳转：样例三<—点这跳转

HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./CSS/index3.css" rel="stylesheet" type="text/css">
<title>导航条</title>
</head>
<body>
<nav class="nav_1">
<ul>
<li><a href="">菜单1 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单2 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单3 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单4 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
<li><a href="">菜单5 </a>
<ul>
<li><a href="">栏目1 </a> </li>
<li><a href="">栏目2 </a> </li>
<li><a href="">栏目3 </a> </li>
<li><a href="">栏目4 </a> </li>
</ul>
</li>
</ul>

</nav>
</body>
</html>

CSS代码：

*{
padding: 0
margin:0
}
body{
background-color: #f5f2ff
}
.nav_1{ /*.容器整体 宽 高 的设定 */
width: 500px
height: 50px
background-color: blue
position: absolute /*固定一级菜单的位置*/
}
.nav_1 ul{ /* 具体菜单的宽高的设定*/
margin: 0 auto
width: 1190px
height: 100%

}
.nav_1 ul li{ /*去掉一级菜单的点，横向浮动*/
list-style:none
float: left
}
.nav_1 ul li a:link, .nav_1 ul li a:visited{ /*单个菜单的具体属性*/
display: block
width: 200px
height: 100%
text-align:center
text-decoration: none
line-height: 50px
font-weight: bold
font-size: 22px
background-color: blue
color:white
border:1px solid white
}

.nav_1 ul li a:hover,.nav_1 ul li a:active{ /*设定鼠标点击 移动过的属性*/
background-color: yellow
}

.nav_1 ul li ul{ /* 二级菜单整体设定 */
display: none /* 隐藏二级菜单列表*/
position: absolute /*二级菜单的位置固定*/
}
.nav_1 ul li:hover ul{
display: block /*二级菜单 将显示为块级元素*/
width:auto /*消除二级菜单的滚动条，因为继承了父级的宽度*/
}
.nav_1 ul li ul li{
float: none /*消除二级菜单的浮动*/
background-color: #eadfff
width:238px
}