menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

导航栏和下拉菜单

武飞扬头像
usrname为username
帮助3人

学习链接：【前端经典】导航栏和下拉菜单，导航条弹出下拉菜单，网站导航栏和下拉菜单，html导

一些难点：

如何显示下拉项和隐藏下拉项，显示下拉项是使用父元素的hover触发

如何让二级下拉项从跟一级下拉分离开，对二级菜单使用相对定位，让一级下拉位于二级下拉左侧。

为了处理二级下拉显示时候的空白，设置一级下拉的高度

最终效果：

学新通

代码如下：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    <style>
  9.  
    .nav{
  10.  
    height: 40px;
  11.  
    background-color: #eee;
  12.  
    box-shadow: 0px 1px 2px #666;
  13.  
    }
  14.  
    *{
  15.  
    /* 去掉导航栏两边的内边距 */
  16.  
    margin: 0;;
  17.  
    padding: 0;
  18.  
    /* 无文本装饰:无下划线 */
  19.  
    text-decoration: none;
  20.  
    list-style: none;
  21.  
    /* 给导航加阴影 */
  22.  
    }
  23.  
    .libt{
  24.  
    /* 让列表横排 */
  25.  
    float: left;
  26.  
    width:100px;
  27.  
    height: 40px;
  28.  
    /* 让里面的字体水平垂直居中 */
  29.  
    text-align: center;
  30.  
    line-height: 40px;
  31.  
    }
  32.  
    /* 设置超链接样式，初始状态为黑色字体*/
  33.  
    .libt a{
  34.  
    color: #000;
  35.  
    /* 把链接改为鼠标悬停时是块状显示，块大于字体块 */
  36.  
    display: block;
  37.  
    }
  38.  
    /* 设置鼠标悬停时为灰色块状 */
  39.  
    .libt a:hover{
  40.  
    background-color: #ccc;
  41.  
    }
  42.  
    .droplist{
  43.  
    /* 增加背景色和阴影 */
  44.  
    background-color: #eee;
  45.  
    box-shadow: 0px 1px 2px #666;
  46.  
    /* 隐藏下拉框 */
  47.  
    display: none;
  48.  
    }
  49.  
    /* 下拉显示是通过父元素的hover触发的 */
  50.  
    /* 显示下拉框 */
  51.  
    /* 一个bug： .libt :hover
  52.  
    改为：.libt:hover .droplist{ */
  53.  
    .libt:hover .droplist{
  54.  
    display: block;
  55.  
    }
  56.  
    .droplist li{
  57.  
    /* 增加上边框线隔离每一项 */
  58.  
    border-top: 1px solid #ccc;
  59.  
    /* 通过改变下拉一的总高度，去掉下拉二触发时，下拉一的空白 */
  60.  
    height: 40px;
  61.  
    }
  62.  
    /* 显示二级下拉，仍然使用父元素的hover触发*/
  63.  
    .droplist li:hover .droplist2{
  64.  
    display: block;
  65.  
    }
  66.  
    .droplist2{
  67.  
    /* 改变一级下拉和二级下拉处于一列的情况
  68.  
    将二级下拉挪到以及下拉的右侧 */
  69.  
    /* 相对定位 */
  70.  
    position: relative;
  71.  
    left: 100px;
  72.  
    /* 上移使下拉项跟触发项左右对齐 */
  73.  
    top:-40px;
  74.  
    background-color: #eee;
  75.  
    box-shadow: 0px 1px 2px #666;
  76.  
    /* 隐藏二级下拉 */
  77.  
    display: none;
  78.  
    }
  79.  
    </style>
  80.  
    </head>
  81.  
    <body>
  82.  
    <!-- 创建导航条 -->
  83.  
    <div class="nav">
  84.  
    <ul class="ullist">
  85.  
    <!-- 复制了五个菜单项 -->
  86.  
    <li class="libt">
  87.  
    <a href="#">菜单项</a>
  88.  
    <ul class="droplist">
  89.  
    <li><a href="#">我是下拉1</a></li>
  90.  
    <li>
  91.  
    <a href="#">我是下拉1</a>
  92.  
    <ul class="droplist2">
  93.  
    <!-- 如果不改变，一级下拉跟二级下拉在同一列 -->
  94.  
    <li><a href="#">我是下拉2</a></li>
  95.  
    <li><a href="#">我是下拉2</a></li>
  96.  
    <li><a href="#">我是下拉2</a></li>
  97.  
    <li><a href="#">我是下拉2</a></li>
  98.  
    <li><a href="#">我是下拉2</a></li>
  99.  
    <li><a href="#">我是下拉2</a></li>
  100.  
    </ul>
  101.  
    </li>
  102.  
    <li><a href="#">我是下拉1</a></li>
  103.  
    <li><a href="#">我是下拉1</a></li>
  104.  
    <li><a href="#">我是下拉1</a></li>
  105.  
    <li><a href="#">我是下拉1</a></li>
  106.  
    </ul>
  107.  
    </li>
  108.  
    <li class="libt">
  109.  
    <a href="#">菜单项</a>
  110.  
    <ul class="droplist">
  111.  
    <li><a href="#">我是下拉1</a></li>
  112.  
    <li><a href="#">我是下拉1</a></li>
  113.  
    <li><a href="#">我是下拉1</a></li>
  114.  
    <li><a href="#">我是下拉1</a></li>
  115.  
    <li><a href="#">我是下拉1</a></li>
  116.  
    <li><a href="#">我是下拉1</a></li>
  117.  
    </ul>
  118.  
    </li>
  119.  
    <li class="libt">
  120.  
    <a href="#">菜单项</a>
  121.  
    <ul class="droplist">
  122.  
    <li><a href="#">我是下拉1</a></li>
  123.  
    <li><a href="#">我是下拉1</a></li>
  124.  
    <li><a href="#">我是下拉1</a></li>
  125.  
    <li><a href="#">我是下拉1</a></li>
  126.  
    <li><a href="#">我是下拉1</a></li>
  127.  
    <li><a href="#">我是下拉1</a></li>
  128.  
    </ul>
  129.  
    </li>
  130.  
    <li class="libt">
  131.  
    <a href="#">菜单项</a>
  132.  
    <ul class="droplist">
  133.  
    <li><a href="#">我是下拉1</a></li>
  134.  
    <li><a href="#">我是下拉1</a></li>
  135.  
    <li><a href="#">我是下拉1</a></li>
  136.  
    <li><a href="#">我是下拉1</a></li>
  137.  
    <li><a href="#">我是下拉1</a></li>
  138.  
    <li><a href="#">我是下拉1</a></li>
  139.  
    </ul>
  140.  
    </li>
  141.  
    <li class="libt">
  142.  
    <a href="#">菜单项</a>
  143.  
    <ul class="droplist">
  144.  
    <li><a href="#">我是下拉1</a></li>
  145.  
    <li><a href="#">我是下拉1</a></li>
  146.  
    <li><a href="#">我是下拉1</a></li>
  147.  
    <li><a href="#">我是下拉1</a></li>
  148.  
    <li><a href="#">我是下拉1</a></li>
  149.  
    <li><a href="#">我是下拉1</a></li>
  150.  
    </ul>
  151.  
    </li>
  152.  
    </ul>
  153.  
    </div>
  154.  
    </body>
  155.  
    </html>
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhffjhii
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群