一个简单实用的css三级菜单效果

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>css实现三级菜单</title>
  6.     <style type="text/css">
  7.         *{margin:0;padding:0}
  8.         ul{list-style:none}
  9.         a{text-decoration:none}
  10.         body{font-size:16px}
  11.         .nav{width:100%;height:40px;line-height:40px;background:#333}
  12.         .container{width:1000px;margin:0px auto}
  13.         .nav li{float:left;position:relative}
  14.         .nav li a{float:left;width:100px;text-align:center;height:40px;color:#fff}
  15.         .nav li ul{width:100%;background:#fff;position:absolute;left:0px;top:40px;display:none}
  16.         .nav li li{float:none}
  17.         .nav li li a{float:none;display:inline-block}
  18.         .nav li li a{color:#333}
  19.         .nav li ul li ul{left:100px;top:0px}
  20.         .nav li:hover{background:red}
  21.         .nav li:hover>ul{display:block}
  22.         .banner img{width:100%}
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="nav" class="nav">
  27.         <div class="container">
  28.             <ul>
  29.                 <li><a href="#">home</a></li>
  30.                 <li>
  31.                     <a href="#">javascript</a>
  32.                     <ul>
  33.                         <li><a href="#">css</a></li>
  34.                         <li>
  35.                             <a href="#">html5</a>
  36.                             <ul>
  37.                                 <li><a href="#">angular.js</a></li>
  38.                                 <li><a href="#">node.js</a></li>
  39.                                 <li><a href="#">vue.js</a></li>
  40.                                 <li><a href="#">React</a></li>
  41.                             </ul>
  42.                         </li>
  43.                         <li><a href="#">jQuery</a></li>
  44.                         <li><a href="#">backbone</a></li>
  45.                     </ul>
  46.                 </li>
  47.                 <li>
  48.                     <a href="#">editor</a>
  49.                     <ul>
  50.                         <li><a href="#">Sublime Text</a></li>
  51.                         <li><a href="#">Atom</a></li>
  52.                         <li><a href="#">Dreamweaver</a></li>
  53.                         <li><a href="#">HBuilder</a></li>
  54.                     </ul>
  55.                 </li>
  56.                 <li><a href="#">about us</a></li>
  57.                 <li><a href="#">Contact us</a></li>
  58.             </ul>
  59.         </div>
  60.     </div>
  61.     <div class="img">
  62.         <img src="data:image/1.jpg" alt="">
  63.     </div>
  64. </body>
  65. </html>

css三级菜单效果的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. CSS实现三级菜单[转]

    头部导航条布局 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  3. HTML+CSS实现简单三级菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html/css 实现下拉菜单效果

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...

  6. 夜深了，写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  7. 学习CSS制作菜单列表，举一反三

    1.普通的二三级菜单 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  8. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  9. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

随机推荐

  1. 总结:在MyEclipse中部署一个wap应用时需要配置的环境变量,我的JDK是安装在C盘,mysql安装在D盘,Tomcat解压在E盘,所以路径一定要看清楚哦,!

  2. Eclipse 一些小知识

    快速查找未完成事项 eg: // TODO 通过模板格式化代码 Window --> Preferences --> Java --> Editor  --> Template ...

  3. Linux 安装Mono环境 运行ASP.NET（二）

    一.安装libgdiplus     前面我们已经安装了apr.apr_util.pcre和httpd apache .现在我们来安装libgdiplus Libgdiplus是一个Mono库,用于对 ...

  4. SQL删除重复数据只保留一条

    用SQL语句,删除掉重复项只保留一条 在几千条记录里,存在着些相同的记录,如何能用SQL语句,删除掉重复的呢 1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断 select ...

  5. $\mathscr{F}$类

    $\mathscr{F}$类:在单位元盘$B(0,1)$中满足$$f(0)=0,f'(0)=1$$ 的双全纯函数的全体.

  6. iOS 导出 ipa 包时 四个选项的意义

    iOS 导出 ipa 包时 四个选项的意义 如图  在 iOS 到处 ipa包的时候 会有四个选项 1.Save for iOS App Store Deployment 保存到本地 准备上传App ...

  7. Delphi控件之---UpDown以及其与TEdit的配合使用（比如限制TEdit只能输入数字，还有Object Inspector之组件属性的介绍）

    最近在开发中使用到了UpDown这个控件,但是因为之前没有使用过,所以很不熟悉,于是就编写了一个简单的demo来学习UpDown以及其结合TEdit的用法. 初步的常用功能的简介 目前(2015.08 ...

  8. sql server 锁

     锁模式 锁模式 说明 共享 (S) 用于不更改或不更新数据的读取操作,如 SELECT 语句. 更新 (U) 用于可更新的资源中. 防止当多个会话在读取.锁定以及随后可能进行的资源更新时发生常见形式 ...

  9. JS挂马攻防

    JS挂马攻防实录 攻现在最多见的JS挂马方法有两种,一种是直接将JavaScript脚本代码写在网页中,当访问者在浏览网页时,恶意的挂马脚本就会通过用户的浏览器悄悄地打开网马窗口,隐藏地运行(图1), ...

  10. F#之旅9 - 正则表达式

    今天,cozy群有个群友发了条正则,问正则匹配相关的问题.虽然他的问题用html selector去处理可能更好,但是我也再一次发现:我忘了正则怎么写的了! 忘掉正则是有原因的,这篇文章会简单记录下F ...