问题描述：
使用CSS制作水平导航条和纵向导航条
问题解决：
（1）水平导航条
1.1 效果预览：
1.2 具体实现：文件hnav.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>水平导航条</title>
<style type="text/css">
#menu {
font: 12px verdana, arial, sans-serif;
} #menu,#menu li {
list-style: none;
padding: 0;
margin: 0;
} #menu li {
float: left;
} #menu li a {
display: block;
width: 100px;
padding: 8px 50px;
background: #3A4953;
color: #fff;
text-decoration: none;
border-right: 1px solid #000;
text-align: center;
} #menu li a:hover {
background: #146C9C;
color: #fff;
text-decoration: none;
border-right: 1px solid #000;
} #menu li a.last {
border-right: 0; /* 去掉左侧边框 */
} .second {
width: 100px;
background: #C30431;
display: none;
} .second a {
display: block;
height: 20px;
line-height: 20px;
color: #fff;
border-top: 1px solid #000;
text-align: center;
/*border-bottom: dashed 1px #E67A92;*/
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu li").hover(function() {
$(this).children("div").show();
}, function() {
$(this).children("div").hide();
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a>
<div class="second">
<a>新闻</a> <a>影音</a> <a>娱乐</a>
</div></li>
<li><a href="http://www.Code52.Net">Code52.Net</a>
<div class="second">
<a>首页</a> <a>新闻</a> <a>建议</a>
</div></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
</ul>
</body>
</html>
注意要点:
1、 ul li 需要使用float：left设置
2、 ul li a 需要设置display：block ，其下拉菜单这里使用的是<div>块
2、垂直导航条
2.1 效果预览：
2.2 具体实现：文件lnav.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
.nav {
float: left;
position: relative;
width: 253px;
} h2,ul,p {
margin: 0;
padding: 0;
text-align: center;
} h2 {
font-weight: 400;
font-size: 100%;
background: #9B203F;
border-bottom: solid 1px #500C1B;
} h2 a {
list-style-type: none;
height: 37px;
color: #fff;
line-height: 37px;
} ul {
font-size: 0;
background: #9B203F;
padding: 0 0 40px;
float: left;
} ul li {
list-style-type: none;
color: #fff;
font-size: 14px;
padding: 0 20px; /*上内边距和下内边距为0px;左内边距和右内边距为20px */
height: 34px;
line-height: 34px;
position: relative;
float: left;
} ul li a {
display: block;
width: 196px;
border-bottom: dashed 1px #E67A92;
} ul li.hover_bg {
background: #C30431;
} .dropdownMenu {
width: 253px;
background: #C30431;
position: absolute; /*这里的定位“相对于” 已经定位的祖先元素ul li 定位 */
right: -253px; /*该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移*/
top: 0;
padding-bottom: 30px;
display: none;
} .dropdownMenu p {
padding: 0 20px;
} .dropdownMenu a {
display: block; /*此元素将显示为块级元素，元素前后带有换行符*/
height: 34px;
line-height: 34px;
color: #fff;
border-bottom: dashed 1px #E67A92;
} a {
cursor: pointer;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".nav ul li").hover(function() {
$(this).addClass("hover_bg");
$(this).children("div").show();
}, function() {
$(this).removeClass("hover_bg");
$(this).children("div").hide();
});
});
</script>
</head> <body>
<div class="nav">
<h2>
<a>全部商品分类</a>
</h2>
<ul>
<li><a>图书、音像、数字商品</a>
<div class="dropdownMenu">
<p>
<a>电子书</a> <a>数字音乐</a> <a>音像</a> <a>文艺</a> <a>人文社科</a> <a>生活</a> <a>科技</a>
<a>教育</a>
</p>
</div></li>
<li><a>家用电器</a>
<div class="dropdownMenu">
<p>
<a>大家电</a> <a>生活家电</a> <a>厨房家电</a> <a>个人健康</a> <a>五金家电</a>
</p>
</div></li>
<li><a>电脑办公</a>
<div class="dropdownMenu">
<p>
<a>电脑整机</a> <a>电脑配件</a> <a>外设产品</a> <a>网络产品</a> <a>办公打印</a>
</p>
</div></li>
</ul>
</div>
<!--nav-->
</body>
</html>
注意要点：
1、ul li list-style-type:none 去除ul列表前圆圈。
2、ul li position：relative 设置相对定位
3、.dropMenu position：absolute 设置绝对定位，同时设置width：253px; right：-253px; top:0px;