CSS水平导航条和纵向导航条

问题描述：

使用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;