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

<!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. 一键打包并发布到Nuget平台

    目标是只要执行一个命令就自动发布新版本到nuget平台 第一步在nuget官网注册一个账号 会有一个APIKEY 如下图   在工程里面添加一个Gruntfile.js 然后copy以下代码 在vs里 ...

  2. BZOJ 1198: [HNOI2006]军机调度（搜索）

    直接暴搜就行了= = CODE: #include<cstdio> #include<iostream> #include<cstring> #include< ...

  3. JVM 堆和栈的区别

      栈内存:   程序在栈内存中运行   栈中存的是基本数据类型和堆中对象的引用   栈是运行时的单元   栈解决程序的运行问题,即程序如何执行,或者说如何处理数据   一个线程一个独立的线程栈   ...

  4. 3月题外：关于JS实现图片缩略图效果的一些小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  5. JavaScript中非常强大的Swiper

    刚开始学习javaScript的时候,做轮播图(比如手机淘宝首页的广告位置)是使用html和css结合js的for语句.传参等知识写出来的.但学到js事件时,其实用Swiper更加好写,Swiper的 ...

  6. asp.net 将ppt，word转化为pdf实现在线浏览详解

    1.首先添加应用:COM里面的Micsosoft Office 12.0 Object Library(VS2013基本都有14.0或者15.0 有的话一样的添加,因为我的没有只有12.0) : 2. ...

  7. VS2008与opencv结合使用的方法

    使用平台:win7(32位)系统,opencv 2.3.1,vs 2008. 目前在需要在vs上运行KCF视觉跟踪算法,其中有用到opencv的库,刚刚开始遇到的如下问题: 1. 计算机无法找到ope ...

  8. oracle expdp导出远程数据到本地

    1.本地数据库新建一个用户test,并授予以下基本权限(尽量不要多授权,如本地权限大于远程,会导致导出失败,郁闷!): grant connect to test;grant resource to ...

  9. ajax删除数据（不跳转页面）

    以前我们讲的删除是利用嵌入php代码,跳转到另一个页面,从而降低了删除速度,但我们今天讲的利用ajax不仅可以达到不跳页面快速删除,并且能添加特效来美化页面. AJAX = 异步 JavaScript ...

  10. 求取水仙花数 && 将整数分解成质因数

    [程序3] 题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如: 153是一个"水仙花数", ...