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

<!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. LINQ查询表达式基础

    LINQ,语言集成查询(Language Integrated Query)是一组用C#和Visual Basic语言的扩展. 对于编写查询的开发人员来说,LINQ 最明显的"语言集成&qu ...

  2. 第二章:JavaScript对象

    一.window对象 1.属性 2.方法 二.history对象 1.方法 三.location对象 1.属性 2.方法 四.Document对象 1.属性 2.方法

  3. burp插件开发

    最近这几天在写burp的插件,有一些写burp插件的流程和误区想跟大家分享一下: 第一步,打开burpsuit,打开extender页面,并将burp中自带的api代码导出,方便后续的代码开发: 第二 ...

  4. Oracle排序分析函数

    在Oracle自拓展SQL功能中,分析函数(Analytical Function)是非常强大的工具. 本篇我们介绍几个Oracle典型的排序分析函数,来帮助我们解决实际问题. 1.从rownum谈起 ...

  5. Mac环境下.Net开发

    Mono是一个由Novell公司(由Xamarin发起),并由Miguel de lcaza领导的,一个致力于开创.NET在Linux上使用的开源工程.它包含了一个C#语言的编译器,一个CLR的运行时 ...

  6. HttpHelper万能框架V1.6

    下载地址:http://yun.baidu.com/share/link?uk=1745303310&shareid=1343567367 引入:System.Web和System.Web.E ...

  7. 每天一个linux命令(56)--crontab命令

    上一节学习了 at  命令是针对仅运行一次的任务,循环运行的例行性计划任务,Linux 系统则是由 cron(crond)这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...

  8. hashMap4种遍历方式

    package collection; import java.util.Collection; import java.util.HashMap; import java.util.Hashtabl ...

  9. bash之管线命令

    命令的输出需要经过好几道手续才能得到我们想要的格式,需要用到管线(pipe),(|) 管线命令(|)仅能处理stdandard output,对stdandard error output会忽略 管线 ...

  10. AR入门系列-03-在unity中将调试好的Vuforia项目导出为APK

    先设置build settings 选中Android后点击Player Settings Product Name设置安装后的Android程序的名字 Bundle Identifier 设置apk ...