<html>
<head>
<meta charset="utf-8">
<style>
body{
text-align:center;
}
.menuDiv{
border:1px solid #aac;
overflow:hidden;
display:inline-block;
}
.menuDiv a{
text-decoration:none;
}
.menuDiv ul,.menuDiv li{
list-style:none;
margin:0px;
padding:0px;
float:left;
}
.menuDiv>ul>li>ul{
position:absolute;
display:none;
}
.menuDiv>ul>li>ul>li{
float:none;
}
.menuDiv>ul>li:hover ul{
display:block;
}
.menuDiv>ul>li>a{
width:120px;
display:block;
line-height:40px;
background-color:#AFE;
color:black;
text-align:center;
border-left:1px solid #bbf;
}
.menuDiv>ul>li:first-child>a{
border-left:none;
}
.menuDiv>ul>li>a:hover{
color:#f0f;
background-color:#bcf;
}
.menuDiv>ul>li>ul>li>a{
width:120px;
display:block;
line-height:36px;
background-color:#EFF;
color:#456;
text-align:center;
border:1px solid #ccc;
border-top:none;
}
.menuDiv>ul>li>ul>li:first-child>a{
border-top:1px solid #ccc;
}
.menuDiv>ul>li>ul>li>a:hover{
color:#a4f;
background-color:#cdf;
}
.menuDiv>ul>li>ul>li>a{
background-image:url('./list.gif');
background-repeat:no-repeat;
background-position-x:23px;
background-position-y:13px;
}
</style>
</head>
<body>
<div class="menuDiv">
<ul>
<li>
<a href="#">菜单一</a>
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
</ul>
</li>
<li>
<a href="#">菜单二</a>
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
</ul>
</li>
<li>
<a href="#">菜单三</a>
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
</ul>
</li>
<li>
<a href="#">菜单四</a>
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
使用HTML+CSS实现鼠标划过的二级菜单栏
最新推荐文章于 2023-03-13 15:59:48 发布