滑动门水平导航条
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滑动门水平导航条</title>
<style>
#menu {
font-family:Arial;
font-size:14px;
margin:0 auto 0 0;
}
#menu ul{
padding: 0 0 0 8px;
margin: 0;
list-style: none;
height: 35px;
background:url(images/under.gif);
}
#menu ul li{
float: left;
}
#menu ul li a{
display: block;
line-height: 35px;
color: #ddd;
text-decoration: none;
padding: 0 0 0 14px;
}
#menu ul li a:hover{
background:url(images/hover.gif);
}
#menu ul li a b{
display: block;
padding: 0 14px 0 0;
}
#menu ul li a:hover b{
background:url(images/hover.gif) no-repeat right top;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#"><b> Home </b></a> </li>
<li><a href="#"><b> Contact Us </b></a></li>
<li><a href="#"><b> Web Dev </b></a></li>
<li><a href="#"><b> Map </b></a></li>
</ul>
</div>
</body>
</html>
三层滑动门导航条
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>三层滑动门技术</title>
<style>
#menu ul{
font-family: Arial;
font-size: 14px;
padding: 0 0 0 8px;
margin: 0 auto;
list-style: none;
height: 35px;
white-space: nowrap;
}
#menu ul li{
float: left;
margin: 0 2px;
}
#menu ul li a{
display: block;
float: left;
line-height: 35px;
color: #666;
text-decoration: none;
padding: 0 0 0 14px;
background: url("images/background.gif");
}
#menu ul li a b{
display: block;
padding: 0 14px 0 0;
background: url("images/background.gif") no-repeat right top;
}
#menu ul li a:hover{
color : #fff;
background: url("images/background.gif") no-repeat left center;
}
#menu ul li a:hover b{
background: url("images/background.gif") no-repeat right center;
}
#menu ul li.current a{
color : #fff;
background: url("images/background.gif") no-repeat left bottom;
}
#menu ul li.current a b{
background: url("images/background.gif") no-repeat right bottom;
}
#menu ul li.current a{
background: url("images/background.gif") no-repeat left bottom;
cursor: default;
}
#menu ul li.current a b{
background: url("images/background.gif") no-repeat right bottom;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="current"><a href="#"><b> Home </b></a> </li>
<li><a href="#"><b> Contact Us </b></a></li>
<li><a href="#"><b> Web Dev </b></a></li>
<li><a href="#"><b> Map </b></a></li>
</ul>
</div>
</body>
</html>