标题

qq_23836283

于 2016-07-13 22:55:30 发布

阅读量143

点赞数

分类专栏： HTMl 文章标签： HTML

HTMl 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>