css下拉菜单制作原理详解
下拉菜单制作原理
这几天一直研究下拉式菜单的css制作方法，以前没有仔细研究，感觉很难，看不懂，云雾缭绕的，现在发现用css不仅有不错的效果的，而且简单易用！
基本原理就是：先把下拉菜单的ul隐藏，再设置主链接的鼠标移过状态
#nav li:hover ul 让隐藏的下拉菜单显示出来！
页面代码：
<div id=”nav”>
<div id=”navtext”>
<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>
<li><a href=”#”>影视在线</a></li>
</ul></li>
<li><a href=”#” >官网</a></li>
</div>
</div>
css代码：
/*这部分定义的是主链接的状态*/
#nav{ height:20px; text-align:center; }
#nav li{margin-left:20px; float:left; list-style-type: none; width:80px;
font-size:14px; }/*浅色代码表示让主菜单横向显示，且不显示列表样式*/
/*定义隐藏导航栏的初始隐藏状态*/
#nav li ul {display:none; border:1px solid #9CDD75; }/*其实这行代码最关键的是display:none 即暂时隐藏下拉菜单*/
/*这是定义下拉菜单的样式*/
#nav li ul li{
margin-left:1px; margin-top:0px; padding:0; background:#F7F7F7;
width:90px; border-bottom:1px solid #9CDD75; }
/*width 要定义好，若width 太宽下拉菜单会变成横的，若是窄的话，就会变成纵的！*/
/*当移过链接，隐藏导航栏的定位*/
#nav li:hover ul {display:block; margin-top:-2px; margin-left:10px; float:left;}
/*其中margin-left 和 margin-top 是定义下拉菜单与主链接的位置关系，display:block表示显示下拉菜单*/
/*隐藏导航栏链接样式*/
#nav li:hover ul li a {display:block;float:left; line-height:25px; filter:Alpha(opacity=50);}
#nav li:hover ul li a:hover {filter:Alpha(opacity=100);background:#7AB237; width:100%; color:#fff}
/*隐藏导航栏结束 filter 表示是使用滤镜#nav li:hover ul 表示对点击到的某主菜单下的列表进行定义*/
上面只写了一级下拉菜单，若有二级下拉菜单可添加如下代码：
#nav li:hover ul li ul {
display:none;
} /*表示当点击某个主菜单时，若该菜单有二级下拉列表，则将二级下拉列表隐藏*/
#nav li ul li:hover ul {
display:block;
background:#c0c0c0;
float:left;
position:relative;
}/*表示当点击某个下拉菜单时，若该菜单有二级下拉列表，则将二级下拉列表显示*/
若想设置三级下拉菜单可依次添加代码即可
