上篇文章介绍了选项卡式导航菜单制作，现在介绍一款漂亮的下拉菜单式导航代码，具体代码如下：希望你好好学哦！
<!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 type="text/css">
#menu {
float:right;
display:inline;
position:absolute;
top:47px;
width:800px;
background:#F00;
}
#menu ul {
position:relative;
}
#menu ul li.top {
display:block;
float:left;
height:34px;
line-height:34px;
width:86px;
text-align:center;
}
#menu li a.top_link {
font-size:13px;
display:block;
font-weight:bold;
}
#menu li:hover a.top_link, .menu_hover {
text-decoration:none;
color:#FFF;
background:url(../images/hover.jpg) no-repeat center;
}
#menu li ul.sub {
display:none;
}
#menu li:hover ul.sub {
display:block;
white-space:nowrap;
width:84px;
border:1px solid #d3d3d3;
background-color:#FFF;
z-index:999;
}
#menu li ul.sub li {
line-height:22px;
list-style:none;
}
#menu li:hover ul.sub li a {
display:block;
height:26px;
width:84px;
line-height:26px;
text-decoration:none;
text-align:center
}
#menu li:hover ul.sub li a:hover {
background:#eeeeee;
color:#d20001;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="top"><a href="#" class="top_link menu_hover">网站首页</a></li>
<li class="top"><a href="#" class="top_link">导航一</a>
<ul class="sub">
<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 class="top"><a href="#" class="top_link">导航二</a>
<ul class="sub">
<li><a href="#">- 栏目一 -</a></li>
<li><a href="#">- 栏目二 -</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link">导航三</a>
<ul class="sub">
<li><a href="#">- 栏目一 -</a></li>
<li><a href="#">- 栏目二 -</a></li>
</ul>
本文由虚拟主机域名注册服务商 银众网络(http://www.yinzhong.net) 整理，如需转载，请保留来源。
(责任编辑：admin) |
