html下拉菜单栏代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现下拉菜单</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font:14px "Microsoft YaHei",sans-serif;
}
ul {
list-style: none;
}
.container {
margin: 0 auto;
width: 1000px;
}
.nav {
/
*margin-top: 60px;*/
width: 100%;
height: 40px;
line-height: 40px;
background: #333;
}
/*⼀级菜单*/ /*该选择器会选择 所有li*/
.nav li {
float: left;
html下拉菜单的制作方法position: relative;
}
/
*⼀级菜单*/
.nav li a {
/*因为a是内联元素*/
display: block;
width: 100px;
text-align: center;
color: #fff;
text-decoration: none;
}
.nav li ul li {
/*覆盖前⾯设置 */
float: none;
}
.nav li ul {
/*border: 1px solid #ccc; border-top: none;*/ background: #fff;
/*⼆级菜单先隐藏*/ display: none;
/*绝对定位*/
position: absolute;
left:0;
top:;
}
/*划过那个li 哪个li就变红*/ .nav li:hover { background: red;
}
.nav li:hover ul{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">⾸页</a></li>
<li>
<a href="#">博客</a>
<ul>
<li><a href="#">同志博客</a></li>
<li><a href="#">⼩同志博客</a></li>
<li><a href="#">⽼同志博客</a></li>
<li><a href="#">⼤同志博客</a></li>
</ul>
</li>
<li>
<a href="#">论坛</a>
<ul>
<li><a href="#">同志论坛</a></li>
<li><a href="#">红⾊论坛</a></li>
<li><a href="#">黄⾊论坛</a></li>
<li><a href="#">绿⾊论坛</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li>
<a href="#">举报我们</a>
<ul>
<li><a href="#">涉黄</a></li>
<li><a href="#">涉⿊</a></li>
<li><a href="#">涉赌</a></li>
<li><a href="#">涉毒</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="banner">
<img src="../../dist/images_one/meinv02.jpg" alt="">
</div>
</body>
</html>
【猿2048】www.mk2048 更多专业前端知识，请上 【猿2048】www.mk2048

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。