Question

html -

<nav>
    <ul>
        <li>Button 1</li>
        <li>Button 2
            <ul>
                <li>Sub-Button 1</li>
                <li>Sub-Button 2</li>
                <li>Sub-Button 3</li>
            </ul>
        </li>
        <li>Button 3</li>
        <li>Button 4</li>
        <li>Button 5</li>
    </ul>
</nav>

css -

* {
    margin: 0;
    padding: 0;
}

nav {
    height: 100%; width: 18%;
    position: absolute;
}
nav ul {
    list-style-type: none;
    font-family: 'Universal Accreditation', Serif;
    font-size: 18pt;
    letter-spacing: 1px;
    font-variant: small-caps;
    color: black;
}

nav ul ul {
    display: none;
}

nav ul li {
    display: block;
}

nav ul li:hover ul {
    display: block;
}

基本上，您正在查看一个简单的无序列表下拉菜单。我试图弄清楚我需要使用什么来创建第二层下拉的缓动效果。将鼠标悬停在“按钮2”上将显示子菜单。

注意它是如何跳跃运动的。我怎么会慢下来？也许看起来子菜单是从'Button 2'下滑出来的？

我应该使用javascript还是css？

Answer 1

使用此代码..

HTML：

<ul id="menu">
<li><a href="#">Link 1</a>
   <ul class="submenu">
     <li><a href="#">Sub Link 1.1</a>
       <ul class="submenu">
          <li><a href="#"> Sub Link 1.1.1</a></li>
          <li><a href="#"> Sub Link 1.1.2</a></li> 
       </ul>
     </li>
     <li><a href="#">Sub Link 1.2</a></li>
     <li><a href="#">Sub Link 1.3</a></li>
   </ul>
 </li>
 <li><a href="#">Link 2</a>
    <ul class="submenu">
     <li><a href="#">Sub Link 2.1</a>
       <ul class="submenu">
          <li><a href="#"> Sub Link 2.1.1</a></li>
          <li><a href="#"> Sub Link 2.1.2</a></li> 
       </ul>
     </li>
     <li><a href="#">Sub Link 2.2</a></li>
   </ul>
 </li>
 </ul>

CSS： .submenu { display：none; } #menu li ul { 保证金左：15px的; }

JQUERY：

$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
                      function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
    $('ul:first', this).each(function () {
        var p = $(this).parent();
        $(this).css('top', p.position().top)
               .css('left', p.position().left + p.width())
               .show();
    });},
    function () { $('ul:first', this).hide(); }
);
});

如何轻松制作垂直下拉菜单？

1 个答案: