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

<!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. python报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe8 in position 0 解决方案

    环境:mac+python 2.7 场景描述:在使用python修改excel内容修改表格内容为中文保存时报以下错误 此时已经设置了utf-8了 但保存时仍然报错错 此时将python中的中文使用un ...

  2. Oracle索引语句整理

    转载:http://www.cnblogs.com/djcsch2001/articles/1823459.html 索引,索引的建立.修改.删除 索引索引是关系数据库中用于存放每一条记录的一种对象, ...

  3. Javascript—②函数

    新手Perfect教程之Javascript②教程-函数 前言:上回我们是从hello world开始的,本期将会讲"函数" 在学自定义函数之前,先了解几个已经定义好的函数: 1 ...

  4. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

  5. Asp.net mvc 知多少（八）

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问[http: ...

  6. JAVA设计模式：代理模式

    最近公司从新开发一个项目,为此对老的代码进行评估分析发现有些地方是可以采用代理模式来进行的,为此对代理模式进行了一次理解: 代理模式:即为指定的目标对象提供一个代理商,由代理商来完成对目标对象的操作. ...

  7. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  8. IOS高级开发～开机启动&无限后台运行&监听进程

    一般来说, IOS很少给App后台运行的权限. 仅有的方式就是 VoIP. IOS少有的为VoIP应用提供了后台socket连接,定期唤醒并且随开机启动的权限.而这些就是IOS上实现VoIP App的 ...

  9. 学习接水系统（java+thread线程）

    (一)项目框架分析 对于学生并发接水项目,根据面向对象的思想,需要创建两个对象,即学生和水龙头. 接下来主要讲解不排队接水和排队接水两张情况. 项目的目录文件如下: (二)不排队接水 假设有四个学生小 ...

  10. 打造“黑客“手机--Kali Nethunter

    从三月份开始,继续更新技术文章.一个月没有更新技术文章了,这一个月有一部分时间是在休息,另一部分时间是在学习汇编和操作系统,沉淀底层和逆向方面的技术. 今年年初,为了玩一下 kali NetHunte ...