CSS多级下拉菜单

最新推荐文章于 2021-03-19 18:16:47 发布

最新推荐文章于 2021-03-19 18:16:47 发布 · 289 阅读

文章标签：

#xhtml

本文介绍了一种仅使用CSS实现的多级下拉菜单的方法。此方案简单易行，通过设置不同层级菜单项的显示与隐藏状态来达到交互效果。然而，这种方法在扩展性方面存在局限性。

纯CSS实现，简单、方便，缺点是扩展性不够好，增加一层菜单时有点麻烦。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>CSS多级下拉菜单</title>

<style>...

.menu{...}{

text-align:left;

color:#FFF;

font-family:幼圆;/**//*菜单字体*/

height:26px;

width:100%

}

.menuul.menuBar{...}{

list-style:none;

margin:0px;

font-size:12pt;/**//*一级菜单字体大小*/

}

.menuul.menuBarli{...}{

float:left;

display:block;

position:relative;/**//*关键*/

margin-right:2px;/**//*一级菜单间距*/

}

.menuul.menuBarlia.menuLink{...}{/**//*一级菜单正常样式*/

display:block;

width:125px;

height:26px;

color:#FFF;

text-decoration:none;

background-color:#90BA18;

text-align:center;

line-height:26px;

}

.menuul.menuBarli:hovera.menuLink{...}{/**//*鼠标移到一级菜单时的样式*/

background-color:#B2DE31;

color:#000;

}

.menuul.menuBarliul,/**//*隐藏二级菜单*/

.menuul.menuBarli:hoverul.subMenu3,/**//*隐藏三级菜单*/

.menuul.menuBarli:hoverulli:hoverul.subMenu4{...}{/**//*隐藏四级菜单*/

margin:0;

display:none;

}

.menuul.menuBarliullia.m2Link,/**//*二级菜单正常样式*/

.menuul.menuBarliulli:hoverullia.m3Link,/**//*三级菜单正常样式*/

.menuul.menuBarliulliulli:hoverullia.m4Link{...}{/**//*四级菜单正常样式*/

text-decoration:none;

color:#000;

display:block;

text-align:center;

width:124px;

background-color:#EBFEAC;

margin-top:1px;/**//*子菜单行间距*/

}

.menuul.menuBarliulli:hovera.m2Link,/**//*鼠标移到二级菜单时的样式*/

.menuul.menuBarliulliulli:hovera.m3Link,/**//*鼠标移到三级菜单时的样式*/

.menuul.menuBarliulliulliulli:hovera.m4Link{...}{/**//*鼠标移到四级菜单时的样式*/

background-color:#D3F666;

color:#000;

}

.menuul.menuBarli:hoverul{...}{/**//*显示二级菜单*/

position:absolute;

display:block;

width:124px;

font-size:11pt;/**//*二级及其下级菜单字体大小*/

background-color:#FFF;/**//*菜单行间显示的颜色*/

left:1px;

}

.menuul.menuBarliulli:hoverul.subMenu3,/**//*显示三级菜单*/

.menuul.menuBarliulli:hoverulli:hoverul.subMenu4{...}{/**//*显示四级菜单*/

padding-left:1px;/**//*每级菜单的间距*/

display:block;

position:absolute;/**//*相对父菜单定位*/

left:124px;/**//*该数值根据菜单宽度设置*/

top:0px;

}

</style>

</head>

<body>

<divclass="menu">

<ulclass="menuBar">

<ul>

<li>

<ahref="#"class="m2Link">测试菜单></a>

<ulclass="subMenu3">

<li>

<ahref="#"class="m3Link">子菜单3></a>

<ulclass="subMenu4">

</ul>

</li>

</ul>

</li>

</ul>

</li>

<ul>

<li>

<ahref="#"class="m2Link">测试菜单></a>

<ulclass="subMenu3">

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>