<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>三级菜单练习</title>

 </head>

 <link rel="stylesheet" href="menu.css" type="text/css" />

 <body>

     <div>

         <ul id="nav">

             <li>

                 <a href="">一级菜单</a>

                 <ul>

                     <li>

                     <a href="">二级菜单</a>

                     <ul>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                     </ul>

                     </li>

                     <li>

                     <a href="">二级菜单</a>

                     <ul>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                     </ul>

                     </li>

                     <li>

                     <a href="">二级菜单</a>

                     <ul>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                     </ul>

                     </li>

                     <li>

                     <a href="">二级菜单</a>

                     <ul>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                         <li><a href="">三级菜单</a></li>

                     </ul>

                     </li>

                 </ul>

             </li>

             <li>

                 <a href="">一级菜单</a>

                 <ul>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                         </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                 </ul>

             </li>

             <li>

                 <a href="">一级菜单</a>

                 <ul>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                 </ul>

             </li>

             <li>

                 <a href="">一级菜单1</a>

                 <ul>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单2</a>

                         <ul>

                             <li><a href="">三级菜单1</a>|<a href="">三级菜单2</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="">二级菜单</a>

                         <ul>

                             <li><a href="http://www.baidu.com" target="_blank">三级菜单3</a></li>

                             <li><a href="">三级菜单</a></li>

                             <li><a href="">三级菜单</a></li>

                         </ul>

                     </li>

                 </ul>

             </li>

         </ul>

     </div>

     <hr>

     <p>...</p>

 </body>

 </html>
 *{

     margin: 0px;

     padding: 0px;

     text-decoration: none;

     list-style:none;

     color: black;

 }

 a{

     /*background-color: #aaa;*/

     padding: 10px 20px;

     font-size: 20px;

     line-height: 44.3px;

     font-weight: bold;

     font-family: arial;

     /*border: 1px solid black;*/

 }

 #nav>li>ul>li>a{

     font-size: 18px;

 }

 #nav>li>ul>li>ul>li>a{

     font-size: 16px;

 }

 #nav>li{

     float: left;

 }

 #nav>li:hover>ul{

     display: block;

     position: absolute;

 }

 #nav>li>ul>li{

     position: relative;

 }

 #nav>li>ul>li:hover>ul{

     display: block;

     position: absolute;

     left: 120px;

     top: 0px;

     min-width: 150px;

 }

 #nav>li>ul>li:hover>ul>li{

 }

 #nav a:hover{

     background-color: #f40;

     color: #fff;

 }

 #nav>li>ul{

     display: none;

 }

 #nav>li>ul>li>ul{

     display: none;

 }

 div{

     /*display: block;*/

     margin-left: 400px;

 }

 div::after{

     content: '';

     display: block;

     clear: both;

 }

HTML+CSS实现简单三级菜单的更多相关文章

  1. Python_简单三级菜单制作

    一:制作要求 1.三级菜单 2.可依次选择进入各子菜单 3.所需新知识点:字典,列表 *本文通过三种方法完成,第一种:只使用循环,第二种:使用列表,第三种:使用字典 二:FlowChart流程图 与上 ...

  2. CSS之简单树形菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. 纯css实现的三级水平导航菜单

    vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 <html> <head> <meta charset="UTF-8" ...

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

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

  6. 纯css制作三级菜单

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

  7. Python学习-------------------三级菜单简单版

    题目: 多级菜单         1.三级菜单         2.可依次选择进入的各子菜单         3.所需新知识点:列表.字典 ReadMe: 这个做循环,比较绕脑子 点开运行即可 Min ...

  8. Python3学习之路~2.5 简单的三级菜单程序

    程序:三级菜单 需求: 1.打印省.市.县三级菜单2.可返回上一级3.可随时退出程序 代码1: data={ "山东":{ "济南":["历下区&qu ...

  9. python（5）- 简单练习：python三级菜单优化

    python三级菜单优化,菜鸟版链接:http://www.cnblogs.com/xuyaping/p/6648170.html menu = { '北京':{ '海淀':{ '五道口':{ 'so ...

随机推荐

  1. bjxdpkdzvaciu

    xufutwovrcgwcdjrmkmsmoiemsgsfk

  2. Linux 时间修改--date -s命令

    Linux 时间修改 不重启修改时区 一.修改linux的时间root使用date指令:date -s1.只修改日期,不修改时间,输入:Linux代码 1. date -s 2007-08-03 da ...

  3. Pushlet后台推送

    1.Pushlet 是一个开源的 Comet 框架,Pushlet 使用了观察者模型:客户端发送请求,订阅感兴趣的事件:服务器端为每个客户端分配一个会话 ID 作为标记,事件源会把新产生的事件以多播的 ...

  4. Python进程、线程、协程之间的关系

    一.从操作系统角度 操作系统处理任务, 调度单位是 进程 和 线程 . 1.进程: 表示一个程序的执行活动 (打开程序.读写程序数据.关闭程序) 2.线程: 执行某个程序时, 该进程调度的最小执行单位 ...

  5. springboot学习（六） springboot开发web应用

    1.简介 Spring Boot非常适合开发web应用程序.你可以使用内嵌的Tomcat,Jetty或Undertow轻轻松松地创建一个HTTP服务器.大多数的web应用都使用spring-boot- ...

  6. java中ThreadLocalRandom类和Random类的使用

    package frank; import java.lang.*; import java.util.*;//工具类一般都在util里面 import java.util.concurrent.Th ...

  7. grub的三种安装方式

    1.install命令 install: install [--stage2=STAGE2_FILE] [--force-lba] STAGE1 [d] DEVICE STAGE2 [ADDR] [p ...

  8. Ubuntu安装Sun JDK

    Ubuntu 14.04 下安装 Sun JDK 1.8.0 1.下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8- ...

  9. 深度解析丨秒懂nova3手机上超酷炫的AR应用及开发

    此前在HUAWEI nova3发布会中,相信大家都已经感受到了AR能力带来的惊喜: 现实场景召唤圣斗士,随时随地交流合影: 点击观看视频:https://v.qq.com/x/page/m1344f6 ...

  10. 在linux中使用sqlplus的上下左右箭头的方法

    在linux下面使用sqlpus连接数据库处理,实在不是很方便,还好有一个工具rlwrap,通过这个能够调用历史命令和回调功能,能够极大的提高效率. 1. 下载 从http://utopia.know ...