问题描述：

        使用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. iOS中UIKit——UIDataDetectors(数据检测器)它将电话、邮件、网址等变为链接

    1.它用于UITextView和UIWebView,属性名为:dataDetetorTypes 2.此属性可以设定使符合电话.邮件.网址.符合格式的日期等文字变为链接文字. 3.电话号码点击后拨出电话 ...

  2. Configuring Report Manager

     Steps to configure and get Reports in Report manager. 1. Enable getting Reports in Report Manager. ...

  3. c#中判断对象为空的几种方式（字符串等）

    (1)先了解几个与空类型相关的关键字和对象  Null : 关键字表示不引用任何对象的空引用,它是所有引用类型变量的默认值,在2.0版本之前也就只有引用变量类型可以为null,如(string a=n ...

  4. C# 和 Unix 时间戳转换

    unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒. /// 时间戳转为C#格式时间 private DateTime GetTime(string timeSt ...

  5. Knockout.Js官网学习（text绑定）

    前言 text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数.该绑定在显示<span>或者<em>上非常有用,但是你可以用在任何元素上. 简单绑定 Today's ...

  6. habse的CopyTable

    需求:对hbase的一张表进行拷贝 一.table1的内容如下 hbase(main)::> scan 'table1' ROW COLUMN+CELL column=f1:age, times ...

  7. scan的filter使用

    本次操作的hbase的t1表的数据是: hbase(main)::> scan 't1' ROW COLUMN+CELL column=f1:age, timestamp=, value= co ...

  8. Ubuntu12.04卡死的解决方案

    刚开始安装的时候用着还行,不过后来发现用了一会总是会出现卡死的状况 后来看了下ubuntu12.04的内核是3.2,后来把内核升级到3.5发现这种情况不会出现了. 查看内核以及升级内核 uname - ...

  9. Source not found The JAR file …has no source attachment.

    问题描述如下: 解决方案: 选中你的项目方案,然后鼠标右键选择属性Properties,如下图: 然后依次按下图操作就完成了.

  10. ADOMD连接SSAS和Mondrian，rex的终结者

    前传 公司使用Mondrian作为OLAP服务器,于是,不得不适用Java开源的Rex进行客户端连接,用了一段时间,实在无法忍受rex的笨拙,于是乎,一直希望有一个工具能够连接替代它. 周末闲来无事, ...