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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         ul.nav,
  8.         ul.nav ul{
  9.             padding: 0;
  10.             margin: 0;
  11.             list-style: none;
  12.             /* 清除浮动 */
  13.             overflow: hidden;
  14.         }
  15.         ul.nav a{
  16.             display: block;
  17.             text-decoration: none;
  18.             padding: 0 0.3em;
  19.             line-height: 1.5em;
  20.             background: teal;
  21.             color: white;
  22.         }
  23.         /* ul限制了宽度，虽然li浮动了，但是li和ul宽度一样所以被挤下来了 */
  24.         ul.nav li{
  25.             float: left;
  26.             width: 6em;
  27.         }
  28.         /* 核心部分,把ul列表绝对定位，当li hover的时候让其变成auto，这里不用display:none来隐藏，而使用了负文本缩进是为了考虑屏幕阅读器*/
  29.         ul.nav ul{
  30.             width: 6em;
  31.             position: absolute;
  32.             left: -9999px;
  33.         }
  34.         ul.nav li:hover ul{
  35.             left: auto;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <ul class="nav">
  41.         <li><a href="#">导航菜单1</a></li>
  42.         <li><a href="#">导航菜单2</a>
  43.         <ul>
  44.             <li><a href="#">子菜单1</a></li>
  45.             <li><a href="#">子菜单2</a></li>
  46.             <li><a href="#">子菜单3</a></li>
  47.             <li><a href="#">子菜单4</a></li>
  48.         </ul></li>
  49.         <li><a href="#">导航菜单3</a></li>
  50.         <li><a href="#">导航菜单4</a></li>
  51.         <li>
  52.         <a href="#">导航菜单5</a>
  53.         <ul>
  54.             <li><a href="#">子菜单1</a></li>
  55.             <li><a href="#">子菜单2</a></li>
  56.             <li><a href="#">子菜单3</a></li>
  57.             <li><a href="#">子菜单4</a></li>
  58.         </ul>
  59.         </li>
  60.     </ul>
  61. </body>
  62. </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之字典常用语法

    1. 创建字典 描述:生成字典 语法: dic={'k1':'v1'} 样例: dic=dict(k1='v1',k2='v2') dic={'k1':'v1','k2':'v2'} 2. 取键值ge ...

  2. 什么是Bootstrap？

    简介 - 框架:库 lib library- jQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式- 把大家都需要的功能预先写好到一些文件 这就是一个框架- Bootstrap 让我们的 ...

  3. [TPYBoard-Micropython之会python就能做硬件 5] 学习使用重力传感器及PWM

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi            欢迎加入讨论群 64770604 一.实验器材 1.TPYboard V102板  一块 2 ...

  4. 20150817---成长日记1---DelayQueue&&Delayed&&Other

    今天第一次接触DelayQueue,源于项目中的话单解析入库的拆分线程中引入,首先简单了解一下DelayQueue: DelayQueue是一个无界阻塞队列,只有在延迟期满时才能从中提取元素.该队列的 ...

  5. 开启AngularJS 1.X的学习之路（1）

    概念(1) AngularJS 应用 AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Controller) 用于控制 AngularJS 应 ...

  6. 什么是Git?

    其实我在写这篇随笔的时候连Git是什么都不知道,只是听说过,也注册了一个GitHub的账号,但并不会玩. 我也是查看了半天的网页才明白一个大概,但我觉得以后肯定会经常用到它. 简单的来说, Git 是 ...

  7. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

  8. How to create a repository in Github with Eclipse?

    How to create a repository in Github with Eclipse? Here is an answer. I will teach you how to do it ...

  9. Python拉勾爬虫——以深圳地区数据分析师为例

    拉勾因其结构化的数据比较多因此过去常常被爬,所以在其多次改版之下变得难爬.不过只要清楚它的原理,依然比较好爬.其机制主要就是AJAX异步加载JSON数据,所以至少在搜索页面里翻页url不会变化,而且数 ...

  10. String字符串截取跟替换经典案例

    分享下今天的一个面试题吧!不算有难度,但是没做出来 题目:将String  str="姓名:武亚伟,年龄:27,地址:西安市": 输出结果为:姓名=武亚伟 年龄=27 地址=西安市 ...