当前位置：首页 > news >正文

CSS多级菜单

news 来源：原创 2024/5/6 2:32:12

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{
background-color: darkgray;
}
#nav{
position: absolute;/*绝对定位*/
z-index: 1;/*定义层叠顺序,避免页面中部的层(左侧导航条覆盖菜单*/
left: 0;
top: 124px;
width: 700px;
height: 30px;
padding: 0px 4px;
}
html>/**/body #nav { /*兼容非IE浏览器能够限制该样式仅在非IE浏览器中被解析
奇怪的是实测IE也行？？*/
left: 40px; /*左侧距离*/
top: 112px; /*顶部距离*/
}
#nav ul{margin: 0;/*清除下划线,清除缩进*/
padding: 0;
}
#nav li a{
text-decoration: none;
}
#nav li{
list-style: none;/* 清除项目符号,居中对齐,加粗显示,*/
text-align: center;
font-weight: bold;
float: left;
}
#nav .list{
line-height:20px;
text-align: left;
padding: 2px;
font-weight: normal;
}
#nav .list a{
color: #ff3ac1;
text-decoration: none;
float: left;
width: 100px;
padding: 3px 5px 0px 0px;
}
#nav .list a:hover{
color: white;
padding: 3px 3px 0px 20px;
width: 88px;
background-color: #FF3AC1;
}
#nav .menu1 {
width: 120px;
height: auto;
margin: 6px 4px 0px 0px;
border: 1px solid #FF3AC1;
background-color: #F1FBEC;
color: #FF3AC1;
padding: 6px 0px 0px 0px;
cursor: hand;
overflow-y: hidden;
filter: Alpha(opacity=70);
-moz-opacity: 0.7;
}
#nav .menu2 {
width: 120px;
height: 18px;
margin: 6px 4px 0px 0px;
background-color: #F5F5F5;
color: #999999;
border: 1px solid #EEE8DD;
padding: 6px 0px 0px 0px;
overflow-y: hidden;
cursor: hand;
}
</style>
<body>
<ul id="nav">
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'"><a href="#">查看样式表CSS</a>
<ul class="list">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'"><a href="#">CSS参考资料</a>
<ul class="list">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'"><a href="#">常见问题</a>
<ul class="list">
<li><a href="#">子菜单1</a></li>
</ul>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'"><a href="#">投稿</a> </li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'"><a href="#">翻译文件</a> </li>
</ul>
</div>
</body>
</html>