css下拉菜单制作原理

css下拉菜单制作原理详解

下拉菜单制作原理

这几天一直研究下拉式菜单的css制作方法，以前没有仔细研究，感觉很难，看不懂，云雾缭绕的，现在发现用css不仅有不错的效果的，而且简单易用！

基本原理就是：先把下拉菜单的ul隐藏，再设置主链接的鼠标移过状态

#nav li:hover ul   让隐藏的下拉菜单显示出来！

页面代码：

信息

            
• 资讯

            
• 博客

            
• 影音

            
• 相册

        

论坛

            
• 兼职招聘

            
• 论文资料

            
• 二手市场

            
• 资源共享

            
• 影视在线

      
          

官网

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;
}/*表示当点击某个下拉菜单时，若该菜单有二级下拉列表，则将二级下拉列表显示*/

若想设置三级下拉菜单可依次添加代码即可