问题描述：

        使用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——UIButton的背景图像无法正常显示的原因

    主要是在将图像引入项目中,没有选择Destination:Copy items if needed一项. 没有选择Destination:Copy items if needed一项,图像只能是以链接 ...

  2. 学习web前端开发感想

    1.学习一个技术,不是一看见源代码就是copy,而是仔细阅读后,找到自己想要的,并且自己写出来,自己理解了,下次遇到同样的问题,自己才能解决. 2.在电脑上学习的过程中,我总是先建立一个文本文档,这样 ...

  3. IE中console的正确使用方法

    本文出处原文链接 转载请注明出处 http://www.cnblogs.com/havedream/p/4519538.html 问题来源:最近在学习easyui,观看的视频教程是孙宇的<EAS ...

  4. luigi学习8--使用中央调度器

    --local-scheduler一般用在开发阶段,这在一个产品中是不建议这样使用的.使用中央调度器有两个目的: 保证两个相同的task不会同时运行两次 提供一个可视化的界面 注意:中央调度器并不会帮 ...

  5. linux 常用命令及技巧

    linux 常用命令及技巧 linux 常用命令及技巧:linux 常用命令总结: 一. 通用命令: 1. date :print or set the system date and time 2. ...

  6. php怎么解析utf-8带BOM编码的json数据，php解析json数据返回NULL

    今天遇到一个问题,json_decode解析json数据返回null,试了各种方法都不行,最后发现,原来是json文件编码的问题. 当json_decode解析utf-8带BOM格式的json数据时, ...

  7. php字符串截取问题

    希望将一个字符串限长显示,如果该字符串超过一定长数,就截取前n个字符,后加省略号. 但是在英文和汉字混合的情况下会出现如下问题: 如果有这样一个字符串  $str="这是一个字符串" ...

  8. 【easyui】—easyui教你编写一个前台的架子

    以前做项目都是在别人搭建好的环境下直接编写单独的页面,也没有处理过怎么搭建一个框架.看到别人的布局都挺好的,自己也想做一个走一下流程. 嘿,刚开始时看着别人写的代码,去找怎么写. 这是我自己的想法,使 ...

  9. openerp 经典收藏 记录规则 – 销售只能看到自己的客户，经理可以看到全部（转载）

    记录规则 – 销售只能看到自己的客户,经理可以看到全部 原文地址:http://cn.openerp.cn/record_rule/ OpenERP中的权限管理有四个层次: 菜单级别: 即,不属于指定 ...

  10. Java入门到精通——开篇

    本系列博客大体框架构思了一段时间了,本系列博客包含了对现有知识的总结也有对未来知识的展望.        本系列博客包括七大部分如下: 第一部分  Java基础应用 讲述JAVA的基础从以下几方面讲述 ...