<!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. SQL Server 2008R2发布与订阅的配置

    使用SQL Server的发布与订阅可以将一个数据库的数据实时传送到另一个数据库中,使用这种方式与Link Server相比可以减少对数据库的连接次数.下面介绍SQL Server 2008R2发布与 ...

  2. 《深入PHP：面向对象、模式与实践》（二）

    第4章 高级特性 本章内容提要: 静态属性和方法:通过类而不是对象来访问数据和功能 抽象类和接口:设计和实现分离 错误处理:异常 Final类和方法:限制继承 拦截器方法:自动委托 析构方法:对象销毁 ...

  3. STM32F103RB, KEIL编译出错：cannot open preprocessing output output file &quot;.\神舟i号\main.d&quot; no such file or

    STM32F103RB,   KEIL编译出错:cannot open preprocessing output output file ".\神舟i号\main.d" no su ...

  4. pandas 绘图与滑窗

    #import nessary library before start import pandas as pd import numpy as np import matplotlib.pyplot ...

  5. kafka分布式搭建

    kafka分布式搭建 (192.168.230.129)master (192.168.230.130)slave1 (192.168.230.131)salve2 在master.slave1.sl ...

  6. css3 animation steps制作饿了么loading

    html代码 <!DOCTYPE html> <html> <head> <title></title> </head> < ...

  7. Atitit.aticmd v4  新特性q39 添加定时器释放功能

    Atitit.aticmd v4  新特性q39 添加定时器释放功能 V1  实现兰cmd V2 标准输入,标准输出,标准错误与重新定向 V3  stdout stderr统一重新定向 V4  添加定 ...

  8. linux下调试使用的 一些shell命令

    查看文件日期:strings |grep Build gdb g++ gcc make systemctl gdb: bt s n b 1.firewalld的基本使用 启动: systemctl s ...

  9. UITabelViewCell自定义(zhuan)

    很多时候,我们需要自定义UITableView来满足我们的特殊要求.这时候,关于UITableView和cell的自定义和技巧太多了,就需要不断的总结和归纳.   1.添加自定义的Cell.   这个 ...

  10. Swoole系列（二）：安装

    Window是没办法安装的,服务器版本建议用linux的centos7 Php版本5.4 安装步骤: 1.更新你的yum yum update 2.安装php相关扩展 2.yum install ph ...