问题描述：
使用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;