问题描述：

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

CSS水平导航条和纵向导航条的更多相关文章

  1. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  2. div+css+position实现简单的纵向导航栏

    完成效果: 这应该是很简单的纵向导航栏了. OK,进入正题 首先,我们看上面的效果图可以分析得出,要实现这个效果需要用到的技术点 1.hover 2.position 3.布局 我认为在这个效果的实现 ...

  3. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  4. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 控制器隐藏了导航 下页pop 导航位置看到黑条

    控制器隐藏了导航 下页pop 导航位置看到黑条 解决: -(void)viewWillDisappear:(BOOL)animated{        [super viewWillDisappear ...

  6. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  7. Web标准：四、纵向导航菜单及二级弹出菜单

    Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位   1)纵向列表 可以看 ...

  8. amazeui学习笔记--css（常用组件9）--导航nav

    amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...

  9. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 设置field的背景颜色以及对stylesheet的理解

    今天遇到一个需求:在做页面输入验证的时候,如果用户没有输入某个项,那么这个项显示为红色,一直没头绪,也找peoplebook,发现field有一个style的方法,后来又在谷歌上找,终于找到了方法: ...

  2. FaceBook微光闪烁---第三方开源--shimmer-android

    Android上的微光闪烁shimmer效果,实现的手段不少,其中比较好的是facebook做的开源库:shimmer-android,其在github上的项目主页是:https://github.c ...

  3. SQL Server中查询结果拼接遇到的小问题

    前天的项目,刚接手,对于模块还不是很熟悉,其中有一个模块,涉及到4个表,其中主要的表就有两个,只要把这个弄清楚了就一切回归于“太平”了. 模块要求:把两个表的内容查询出来,结果连接在一起.大师说完,感 ...

  4. 第七节：使用实现了dispose模式的类型

    知道类型如何实现dispose模式之后,接下来看一下开发人员怎样使用提供了dispose模式的类型.这里不再讨论前面的SafeHandle类,而是讨论更常用的FileStream类. 可以利用File ...

  5. 决策树的基本ID3算法

    一  ID3算法的大致思想 基本的ID3算法是通过自顶向下构造决策树来进行学习的.我们首先思考的是树的构造从哪里开始,这就涉及到选择属性进行树的构造了,那么怎样选择属性呢?为了解决这个问题,我们使用统 ...

  6. 一幅图证明chrome的由来和目的

  7. SQL30081N 检测到通信错误。正在使用的通信协议："TCP/IP"

    环境描述: 今天在虚拟机上安装了Linux系统,并且装了DB2,但是在连接的时候遇到了个问题,百思不得其解.下面是具体问题跟解决办法 问题描述: 解决办法: 1.先ping服务器是否可以ping通. ...

  8. R 中安装xlsx包缺少java环境解决方案

    1.安装Java程序(官网win7 64位系统的Java安装程序及网址http://www.java.com/zh_CN/download/manual.jsp),选择windows 64位脱机安装到 ...

  9. Android--Fragment的懒加载

    我们都知道,fragment放在viewPager里面,viewpager会帮我们预先加载一个,但是当我们要看fragment里面的内容时,我们也许只会去看第一个,不会去看第二个,如果这时候不去实现f ...

  10. hdu 2120 Ice_cream's world I

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2120 Ice_cream's world I Description ice_cream's worl ...