您的位置：首页 > Web前端 > HTML

标题

2016-07-13 22:55 302 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML

相关文章推荐

新的分享

章节导航