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

<!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. Android Studio 错误集

    错误列表与解决方案: 1.Android studio Gradle project sync failed Android studio 构建项目出错 Error:Unable to start t ...

  2. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  3. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  4. CLOSE_WAIT TIME_WAIT

    TCP状态转移要点    TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不会被释放.网络服务器程序要同时 ...

  5. 关于synchronized、wait、notify已经notifyAll的使用

    前言:关于synchronized.wait.notify已经notifyAll大家应该不陌生,现在我大致说一下我的理解. 一:synchronized synchronized中文解释是同步,那么什 ...

  6. console深入理解

    ["$$", "$x", "dir", "dirxml", "keys", "values ...

  7. IOS设备对position的支持性

    最近在开发一个网页. 要嵌套在微信里 大家都知道 IOS版微信和安卓版微信还是一定的差距 IOS版微信在打开网页的时候回调取自己的浏览器以及内核 但是安卓版微信不会,他会默认使用自己的QQ浏览器和X5 ...

  8. 网络性能测试工具Iperf/Jperf解读

    Iperf 是一个网络性能测试工具.Iperf 可以测试TCP 和UDP 带宽质量.Iperf 可以测量最大TCP 带宽,具有多种参数和UDP 特性. Iperf 可以报告带宽,延时抖动和数据包丢失. ...

  9. 一个简单的php站点配置

    一个简单的php站点配置   现在我们来看在一个典型的,简单的PHP站点中,nginx怎样为一个请求选择location来处理:   server {     listen      80;     ...

  10. Window下JDK安装与配置

    今天项目组开会,由于.Net平台的限制无法满足现有业务需求,项目计划从.Net平台转Java平台,采用Java+Spark+Hadoop,之前关于Java和Hadoop的书也买的有只是平时看的少,最近 ...