实现一个效果不难，难的是使用最少的代码实现一个效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul.nav,
        ul.nav ul{
            padding: 0;
            margin: 0;
            list-style: none;
            /* 清除浮动 */
            overflow: hidden;
        }
        ul.nav a{
            display: block;
            text-decoration: none;
            padding: 0 0.3em;
            line-height: 1.5em;
            background: teal;
            color: white;
        }
        /* ul限制了宽度，虽然li浮动了，但是li和ul宽度一样所以被挤下来了 */
        ul.nav li{
            float: left;
            width: 6em;
        }
        /* 核心部分,把ul列表绝对定位，当li hover的时候让其变成auto，这里不用display:none来隐藏，而使用了负文本缩进是为了考虑屏幕阅读器*/
        ul.nav ul{
            width: 6em;
            position: absolute;
            left: -9999px;
        }
        ul.nav li:hover ul{
            left: auto;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">导航菜单1</a></li>
        <li><a href="#">导航菜单2</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
            <li><a href="#">子菜单3</a></li>
            <li><a href="#">子菜单4</a></li>
        </ul></li>
        <li><a href="#">导航菜单3</a></li>
        <li><a href="#">导航菜单4</a></li>
        <li>
        <a href="#">导航菜单5</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
            <li><a href="#">子菜单3</a></li>
            <li><a href="#">子菜单4</a></li>
        </ul>
        </li>
    </ul>
</body>
</html>

演示地址：http://down.yesyes.wang/book/06/select-nav.html

css实现下拉菜单的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  3. CSS的下拉菜单被挡住，修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  4. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  5. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  6. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  7. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  8. 11.css定义下拉菜单

    注意点: 1.设置a标签的width 和 height 的时候,直接设置是没用的,可以以这样两种方式设置 (1). display:block; (2). float:left; 2.设置下拉菜单,最 ...

  9. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. VS编辑器主题变换插件-EasyVS

    主题功能是这个版本的亮点. 我收集了七个比较流行的编辑器主题样式,有了这个功能再也不用到网上寻找安装这样那样的主题了. 增加文件右键“在资源管理器中打开”功能 我们知道VS2010对文件夹支持“在资源 ...

  2. vue实现图书管理demo

    年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难.如果你想学vue.js的知识,推荐网址:http://vuejs.or ...

  3. Android Asynctask的优缺点

    导语:之前做习惯了Framework层的开发,今天在武汉斗鱼公司面试APP客户端的开发,其中一道题是讲述Asynctask的优缺点,我靠,我只是知道有这么一个东西,会用而已,看来之前的生活太过于安逸, ...

  4. hadoop-hdfs体系结构

    HDFS作为Hadoop的核心技术之一,HDFS(Hadoop Distributed File System, Hadoop分布式文件系统)是分布式计算中数据存储管理的基础.具有高容错高可靠性.高可 ...

  5. hadoop编译

    说明: hadoop版本:hadoop-2.5.0-cdh5.3.6 环境:centos6.4 必须可联网 hadoop 下载网址: http://archive.cloudera.com/cdh5/ ...

  6. jxls2.3-简明教程

    jxls是一个简单的.轻量级的excel导出库,使用特定的标记在excel模板文件中来定义输出格式和布局.java中成熟的excel导出工具有pol.jxl,但他们都是使用java代码的方式来导出ex ...

  7. node.js 学习随笔

    一,cnmp的操作: 1,cnmp info jquery查询jquery的版本: 2,cnmp install jquery@1.11.1:安装: 3,cnmp list查询所有下载的内容: 4,c ...

  8. centos 安装gcc->联网 问题解决

    本篇部分摘抄至TD_时缔 VMware虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错:cannot find a valid baseurl for repo ...

  9. 安卓的UI界面开发(初学者推荐)

    一  随便扯扯 用户界面设计是程序开发的一项重要内容.在界面设计的过程中,需要考虑如何制作出UI界面,怎么样控制UI界面两大块. 任何有编程常识的人都知道:软件界面是开发者添加控件,编写控件控制逻辑, ...

  10. index_merge引发的死锁排查

    概述 前几天排查了一个死锁问题,最开始百思不得其解,因为发生死锁的两个事务是单语句事务,语句类型相同(where属性列相同,仅值不同),而且语句都走了相同的索引,但最终确实发生了死锁.通过定位排查发现 ...