<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 漂亮的导航栏 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
border:#F66FFF 1px solid;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
/*浮动效果*/
position:relative;
}
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:105px;
height:30px;
color:#000;
border:1px solid #ffffff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover ul {
display:block;
/*这个代码相当重要啊*/
position:absolute;
top:31px;
left:0;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:red;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a class="hide" href="#">水果1</a>
<ul>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
<li><a href="#" title="这是个超链接">苹果</a></li>
</ul>
</li>
<li>
<a class="hide" href="#">水果2</a>
<ul>
<li><a href="#">香蕉</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">香蕉</a></li>
</ul>
</li>
<li>
<a class="hide" href="#">水果3</a>
<ul>
<li><a href="#">橘子</a></li>
<li><a href="#">橘子</a></li>
<li><a href="#">橘子</a></li>
<li><a href="#">橘子</a></li>
<li><a href="#">橘子</a></li>
</ul>
</li>
<li>
<a class="hide" href="#">水果4</a>
<ul>
<li><a href="#">柠檬</a></li>
<li><a href="#">柠檬</a></li>
<li><a href="#">柠檬</a></li>
<li><a href="#">柠檬</a></li>
<li><a href="#">柠檬</a></li>
<li><a href="#">柠檬</a></li>
<li><a href="#">柠檬</a></li>
</ul>
</li>
<li>
<a class="hide" href="#">水果5</a>
<ul>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
<li><a href="#" title="这是个超链接">西瓜</a></li>
</ul>
</li>
<li>
<a class="hide" href="#">水果5</a>
<ul>
<li><a href="#" title="Example one">冬瓜</a></li>
<li><a href="#" title="Weft fonts">冬瓜</a></li>
<li><a href="#" title="Vertical align">冬瓜</a></li>
</ul>
</li>
<li>
<a class="hide" href="#">水果6</a>
<ul>
<li><a href="#">西红柿</a></li>
<li><a href="#" >西红柿</a></li>
<li><a href="#" >西红柿</a></li>
<li><a href="#">西红柿</a></li>
</ul>
</li>
</ul>
<div style="width:800px;height:200px;border:#5566ff solid 1px; ">ddddddddddddddddddddddddd</div>
</div>
</body>
</html>
扫一扫
28万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
