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

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229286.html原文链接：https://javaforall.net