首页 > 代码库 > 下拉菜单的制作无js
下拉菜单的制作无js
下拉菜单有许多种制作方法；
今天我们就做最简单的一种；
话不多说先看html
<body>
<div class="menubox">
<ul>
<li class="list1"><a href="">首页</a></li>
<li class="list1"><a href="">公司简介</a>
<ul>
<li class="list2"><a href="">公司的历史</a></li>
<li class="list2"><a href="">公司的发展</a></li>
<li class="list2"><a href="">公司的规模</a></li>
</ul>
</li>
<li class="list1"><a href="">产品信息</a>
<ul>
<li class="list2"><a href="">产品简介</a></li>
<li class="list2"><a href="">产品价格</a></li>
<li class="list2"><a href="">产品型号</a></li>
</ul>
</li>
<li class="list1"><a href="">联系我们</a>
<ul>
<li class="list2"><a href="">电话</a></li>
<li class="list2"><a href="">邮箱</a></li>
<li class="list2"><a href="">微信</a></li>
</ul>
</li>
</ul>
</div>
</body>
这里用到的是一种嵌套的结构；这样不用定位也可以在list1的下方；
好了我们看下css
<style>
*{margin:0px;padding:0px;}
这个是初使化；
.menubox{margin:0 auto;width:800px;height:36px;}
这个是将导航菜单定 位在中间；
.menubox>ul{width:100%;height:100%;}
.list1{ width:200px;height:36px;
float:left;list-style-type:none;
font-size:18px;line-height:36px;
font-weight:bolder;
background:#F22765;text-align:center;
}
设置list1的样式；垂直居中用lineheight=height;水平居中用：text:center;
.list1:hover{background:#DE18CC}
设置鼠标放上去时的样式
.list1>a{text-decoration:none;color:#fff;}
设置list1下的a的样式；注意如果color在list1上设置是没有作用的；因为有a ；所以要在a 上设置字体颜色；
.list2{width:200px;height:36px;
font-size:14px;background:#F4D613;
line-height: 36px;text-align:center;
list-style-type:none;margin-bottom:2px;
display:none;
}
这个和list1几乎一样；但是这里多了一个display:none; 这个就是隐藏；
.list2:hover{background:#F75839}
这个就不用讲了吧！
.list1:hover .list2{display:block;}
这个是最重要的；这个就是让鼠标放在list1上让list2显示和隐藏的；
.list2>a{text-decoration:none;color:#6A5757;}
这个也不用讲了吧；
</style>
下拉菜单的制作无js