设计多级菜单栏代码,Css代码库,德仔网

代码语言

代码分类

【Css】设计多级菜单栏

作者:炎烯 / 发布于2016/7/11/ 833

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.menu{
    font-family:"黑体";/*定义整个menu容器中的字体为黑体*/
    width:440px;/*宽度*/
    margin:0;/*定义*/
}
.menu ul{/**/
    padding:0px;/**/
    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:1px 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:0px;/**/
    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>
<div class="clear"></div>
</ul>
</div>
</body>
</html>

试试其它关键字

　菜单栏　

同语言下

可能有用的

炎烯贡献的其它代码(15)