用CSS做的两层菜单和四层菜单
来源：互联网 发布：承德县大数据 编辑：程序博客网 时间：2024/05/17 18:12
下面是html代码
--------------------------------------------------------------------------------
<ul class="menuOne">
<li>第一层
<ul class="menuTwo">
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>第一层
<ul class="menuTwo">
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>第一层
<ul class="menuTwo">
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
<li>第二层
<ul class="menuThree">
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<li>第三层
<ul class="menuFour">
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
--------------------------------------------------------------------------------
下面是CSS代码
--------------------------------------------------------------------------------
/*两层菜单
********************************************************************/
/*第一层UL的样式*/
.menu
{
list-style-type: none;
width: 200px;
height: 20px;
padding: 0xp;
}
/*第一层LI的样式*/
.menu > li
{
position:relative;
float: left;
width: 60px;
height: 18px;
text-align: center;
border: solid 1px green;
background-color: #99CCFF;
}
/*打开菜单*/
.menu > li:hover ul
{
display: block;
}
/*第二层UL的样式*/
.menu > li > ul
{
display: none;
position: relative;
list-style-type: none;
width: 62px;
left: -1px;
padding: 0px;
margin: 1px 0px 0px 0px;
}
/*第二层LI的样式*/
.menu > li > ul > li
{
position: relative;
width: 60px;
height: 18px;
border: solid 1px green;
background-color: #669999;
}
/*CSS四层菜单
********************************************************************/
/*第一层UL*/
.menuOne
{
list-style-type: none;
width: 660px;
padding: 0px;
margin: 0px;
height: 30px;
}
/*第一层LI*/
.menuOne > li
{
float: left;
width: 60px;
height: 18px;
text-align: center;
border: solid 1px green;
background-color: #99CCFF;
padding: 5px 0px;
margin: 0px;
}
/*打开第二层菜单*/
.menuOne > li:hover > ul
{
display: block;
}
/*第二层UL*/
.menuTwo
{
position: relative;
list-style-type: none;
display: none;
width: 600px;
padding: 0px;
margin: 5px 0px 0px 0px;
left: -1px;
}
/*第二层LI*/
.menuTwo > li
{
position: relative;
width: 60px;
height: 18px;
background-color: Aqua;
border: solid 1px green;
padding: 5px 0px;
margin: 0px;
}
/*打开第三层菜单*/
.menuTwo > li:hover > ul
{
display: block;
}
/*第三层UL*/
.menuThree
{
position: relative;
list-style-type: none;
width: 246px;
height: 30px;
padding: 0px;
padding: 0px;
display: none;
}
/*第三层LI*/
.menuThree > li
{
position: relative;
float: right;
width: 60px;
height: 18px;
top: -24px;
padding: 5px 0px;
margin: 0px;
border: solid 1px green;
background-color: Gray;
}
/*打开第四层菜单*/
.menuThree > li:hover > ul
{
display: block;
}
/*第四层UL*/
.menuFour
{
position: relative;
list-style-type: none;
display: none;
width: 62px;
left: -1px;
padding: 0px;
margin: 6px 0px 0px 0px;
}
/*第四层LI*/
.menuFour > li
{
position: relative;
padding: 5px 0px;
width: 60px;
height: 18px;
border: solid 1px green;
background-color: #0099FF;
}
------------------------------------------------------------------------------------------------
- 用CSS做的两层菜单和四层菜单
- CSS实现onMouseOver、onMouseOut效果和层套菜单
- 只有两层结构的树型菜单 简单实现
- CSS+DIV+JS树形2层菜单
- 用CSS做的下拉菜单
- 解决js层菜单和flash冲突的方法
- CSS做的下拉菜单
- 浮动层菜单
- jQuery 弹出层菜单
- js实现 菜单层和内容层 共同显示 效果
- 关于菜单的补充,叠层菜单的定义
- 很cool的下拉菜单效果--层
- js.1 树形菜单--层的使用
- 显示隐藏层实现的下拉菜单
- QTreeWidget (两层）点击右键菜单删除节点
- 下拉菜单的两种实现方式：CSS和JS
- CSS+DIV+JS树形2层菜单,支持FF
- cocos2d-x ——菜单层(CCMenuItemImage)四
- typedef和#define的用法与区别
- Oracle表空间恢复让你不再担心数据库出现错误
- ArcEngine开发问题总结
- 用ORACLE建立数据库（详解）
- pptpd客户端与服务器网络结构相似时的win客户端路由设定
- 用CSS做的两层菜单和四层菜单
- 水皮：2010年第一个利好比往年来得更早一些
- libnids-1.21 中 IP 分片重组分析之数据结构与处理流程
- HTTP协议
- 重建Oracle表空间专业技术指导
- 六步了解Oracle表空间状态
- oracle服务器配置及优化
- 初学C语言，十进制int型、float型转化为其他进制数
- 无（有点乱）
