<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu {
font-family: 黑体;
width: 440px;
margin:0;
}
.menu ul {
padding:0;
list-style-type: none;
}
.menu ul li {
float: left;
/*定位方式为相对定位*/
position: relative;
}
.menu ul li a, .menu ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
width:104px;
height:30px;
color:#000;
border: solid #fff;
border-width: 1px 1px 0 0;
background: #5678ee;
line-height: 30px;
font-size: 14px;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li ul {
/*将二级菜单设计为不显示*/
display: none;
}
/*鼠标滑过一级菜单时,二级菜单才显示*/
.menu ul li:hover ul {
display: block;
position: absolute; /*绝对定位*/
top:31px;
left:0;
width: 105px;
}
.menu ul li:hover ul li a {
display: block;
background: #ff4321;
color:#000;
}
.menu ul li:hover ul li a:hover {
background: #dfc184;
color:#000;
}
</style>
</head>
<body>
<div class="menu">
<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>
</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 class="clear"> </div>
</div>
</body>
</html>
CSS设计多级菜单
猜你喜欢
转载自blog.csdn.net/weixin_42430194/article/details/85218708
今日推荐
周排行