CSS/JQuery实现二级菜单栏下滑-优快云博客

本文链接：https://blog.youkuaiyun.com/Jane_3210/article/details/83098573

本文介绍了如何使用CSS和JQuery来实现二级菜单栏的下滑效果。CSS方法利用相对定位和绝对定位，配合动画效果，鼠标经过时显示二级栏目。JQuery方法则通过slideDown()和slideUp()，代码简洁，效果更佳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS实现方法

使用相对定位和绝对定位，先隐藏二级栏目，鼠标经过后设为可见，并结合css动画效果。

li{list-style: none;text-align:center; }
a{text-decoration: none;}
li.item{
        position: relative;
        width: 130px;
        background: red;
}
ul {
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
        /* margin-left: -36px;  */
        width: 130px;
        background:yellow;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -moz-transform: translateY(-10%);
        -o-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
        opacity: 0;
        filter: alpha(opacity=0);
        visibility: hidden; 
}
li.item:hover ul{
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
}

<li class="item"><a href="">一级栏目</a>
  <ul>
    <li><a href="">二级栏目</a></li>
   <li><a href="">二级栏目</a></li>
  </ul>
</li>

效果如下：

JQuery实现方法

先将submenu隐藏，再用slideDown()和slideUp()这两个方法实现。

li{list-style: none; width: 130px;text-align: center;}
a{text-decoration: none;}
li.item{background-color: red;}
.submenu{display: none;padding: 0;margin:0;background-color: yellow;}
.submenu li{padding: 0;display: block;}
.submenu li:hover{background-color: green;}

<li class="item"><a href="">一级栏目</a>
  <ul class="submenu">
    <li><a href="">二级栏目</a></li>
   <li><a href="">二级栏目</a></li>
  </ul>
</li>

$(function(){
    $("li.item").hover(function() {
      $(this).find('.submenu').stop(true,true).slideDown();
    }, function() {
      $(this).find('.submenu').stop(true,true).slideUp();
    });

  })

效果和css类似，但用jquery实现代码相对简单易懂，呈现的效果更好！