问题描述：

        使用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. asp.net读取excel文件多种方法

    asp.net读取excel文件的三种方法示例,包括采用OleDB读取Excel文件.引用的com组件读取Excel文件.用文件流读取.   方法一:采用OleDB读取Excel文件 把Excel文件 ...

  2. 每天进步一点--c#基础巩固,事件、委托

    要想技术有所提高,就是把有些问题真正的弄懂弄明白,我从事C#开发两年了,一直对事件委托等概念一知半解,有时候博客园上看看别的大牛的文章,看看懂了就过去了,时间长了又忘了,真正理解还是要自己动手弄些例子 ...

  3. 比较C++中的4种类型转换方式

    C++的四种cast操作符的区别并非我的原创-------------------------------------------from:http://blog.csdn.net/hrbeuwhw/ ...

  4. 第五章 管理程序流(In .net4.5) 之 异常处理

    1. 概述 本章包括.net4.5中异常处理相关的部分. 2. 主要内容 2.1 处理异常 ① try.cahtch.finally 机制,无需多言. ② 使用 Environment.FailFas ...

  5. 手动书写小代码-foreach实现机制

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  6. oracle 各种问题排查

    一.ORA-00257 ORA-00257归档日志写满,最简单方法.可以更改归档的大小. 二.job不自动运行解决方法 http://www.cnblogs.com/xbding/p/5861443. ...

  7. hdu 1250 Hat's Fibonacci

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1250 Hat's Fibonacci Description A Fibonacci sequence ...

  8. MVC4.0网站发布和部署到IIS7.0上的方法【转：http://www.th7.cn/Program/net/201403/183756.shtml】

    最近在研究MVC4,使用vs2010,开发的站点在发布和部署到iis7上的过程中遇到了很多问题,现在将解决的过程记录下来,以便日后参考,整个过程主要以截图形式呈现 vs2010的安装和mvc4的安装不 ...

  9. Apple Watch应用开发经验谈：我遇到的那些坑

    本文作者张忠良是滴答清单Apple Watch版应用的开发工程师,他用了一周的时间使用纯Objective-C语言完成了Apple Watch版滴答清单应用的开发工作.在这里,他从开发角度阐述了个人对 ...

  10. 上传图片的回调函数，callback作为一个函数针对回调函数

    Tool.ImageUpload = function (selector, callback) { /// <summary>图片上传</summary> /// <p ...