纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

虽然网上类似甚至相同的案例有很多，但是我还是写下，以记下笔记，也可供大家参考

希望大家可以指导批评~~

首先我们以列表ul li 来开始我们菜单也可以说导航条的制作：

在页面中我们首先构建以下XHTML结构：

<style>
body,div,ul,li{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
ul#navWrapper li{
float:left;
list-style:none;

height:45px;
line-height:45px;
}
ul#navWrapper li ul li{
float:none;
}
div#banner{
clear:both;

height:50px;
margin-top:50px;
margin-left:50px;
}
div#content{
margin-left:50px;
}
ul#navWrapper ul{
display:none;
position:absolute;
background:#CCC;
}
ul#navWrapper div#test{
display:none;
position:absolute;
height:200px;
width:600px;
background:#cde6c7;
}
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
display:block;
}

ul#navWrapper{
background:#CCC;
height:45px;
width:960px;
margin:0 auto;
margin-top:30px;
}

li a{
font-size:24px;
color:#333;
display:block;
height:45px;
padding:0 20px;
}
li a:hover{
color:#fff;
background:#000;
}
</style>

View Code
效果：

　　图一：



　　图二：



OK！这就是在以上基本结构上设计的一个例子了。如果还需要设计，只需要在以上最基本结构上设计就行了~~

参考文献：微软官方文档“如何创建CSS下拉菜单”