在列表中显示下拉列表 ul

Question

我已经尝试了所有方法，但我一直坚持这一点。我希望在悬停 ul li 时显示 ul ul li。任何人都可以看到我需要做什么？我认为我对 ul 和 li 的声明做错了，但如果这是唯一的问题，我不知道。

顺便说一句：这是一个垂直菜单/列表

HTML：

<!--::::: SIDEBAR :::::-->

    <div class="sidebar"> <!-- sidebar starts-->
        <!-- menu starts-->
        <div id="menu_nav">
          <ul class="main">
             <li class="selected"><a class="selected" href="#featured_work1">Wat is D-day</a></li>
             <li><a href="#featured_work1">Waarom een invasie</a></li>
                   <li class="sub"><a href="#featured_work2">Het doel</a></li>
               <ul >
                <li><a href="#featured_work2">test1</a></li>
                <li><a href="#featured_work2">test2</a></li>
                <li><a href="#featured_work2">test3</a></li>
               </ul>
             <li><a href="#featured_work1">Operation Fortitude</a></li>
             <li><a href="#featured_work2">Landingsplaats</a></li>
             <li><a href="#featured_work1">Atlantische muur</a></li>
             <li><a href="#featured_work2">Organisatie Todt</a></li>
             <li><a href="#featured_work1">Batterijen</a></li>
             <li><a href="#featured_work1">Luchtlandingen</a></li>
             <li><a href="#featured_work2">Amfibische landingen</a></li>
             <li><a href="#featured_work1">Tijdlijn</a></li>
             <li><a href="#featured_work2">Na D-day</a></li>
             <li><a href="#featured_work1">Cijfers</a></li>
             <li><a href="#featured_work1">De Facties</a></li>
             <li><a href="#featured_work1">Materiaal</a></li>
             <li class="last"><a href="#featured_work2">Kaarten</a></li>

          </ul>
        </div><!-- menu ends -->

CSS：

/* A) SIDEBAR MENU ++++++++++++++++++++++++++++++++++++++++++++ */
#menu_nav { }
#menu_nav ul li { display: block; border-bottom: 1px dashed #555; }

#menu_nav ul ul li { display: block; border-bottom: 0px dashed #555; }

#menu_nav ul ul li a {
    display: none;
    border-bottom: 0px dashed #555;
    padding: 7px 0 0px 58px;
    font-size: 12px;
    margin-top: -4px;
    background: url(style/images/forward_light2.png)  no-repeat;
    background-position: 38px 7px;
    color: #000;
    text-align: left;
    text-shadow: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease; }

#menu_nav ul li.sub a:hover ul { display: block; }

#menu_nav ul li a {
    display: block;
    padding: 7px 0 11px 40px;
    font-size: 14px;
    margin-top: 3px;
    color: #9b2929;
    text-align: left;
    text-shadow: none;
    background: url(style/images/arrow-right.png)  no-repeat;
    background-position: 0px 7px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease; }



#menu_nav ul li.last { border-bottom: 0 solid #444; padding-bottom:10px; }
#menu_nav ul li a.selected { 

    display: block;
    padding: 7px 0 11px 40px;
    font-size: 14px;
    color:#252525;
    text-align: left;
    text-shadow: none;
    background: url(style/images/arrow-right-red.png)  no-repeat;
    background-position: 0px 7px;
    }



#menu_nav ul li a:hover {
    padding: 7px 0 11px 45px; 
    -moz-opacity: 0.85;
    -ms-filter:progid: DXImageTransform.Microsoft.Alpha(Opacity=85);
    filter: alpha(opacity=85);
    opacity: 0.85;
    -khtml-opacity: 0.85;
    text-decoration: none; }

#menu_nav ul ul li a:hover{
    padding: 7px 0 0px 62px; 

    text-decoration: none; }

Answer 1

你有很多复杂的后代选择器，我认为这是你的问题。

首先，删除#menu_nav ul ul li a 之后的display: none 行。

然后将这些声明添加到您的 CSS：

li.sub ul {
display: none;
}

li.sub:hover ul {
display: block;
}

然后，在您的 HTML 中，更改以下行：

<li class="sub"><a href="#featured_work2">Het doel</a></li>
           <ul >
            <li><a href="#featured_work2">test1</a></li>
            <li><a href="#featured_work2">test2</a></li>
            <li><a href="#featured_work2">test3</a></li>
           </ul>

致以下：

<li class="sub"><a href="#featured_work2">Het doel</a>
           <ul >
            <li><a href="#featured_work2">test1</a></li>
            <li><a href="#featured_work2">test2</a></li>
            <li><a href="#featured_work2">test3</a></li>
           </ul></li>

换句话说，把<ul> 里面 <li class="sub">.

这在 Chrome 25 中对我有用。这就是你所追求的吗？

过渡

在这种情况下，您可以执行的转换类型有些受限。 CSS 过渡不适用于display 规则，并且它们不适用于height，除非您使用精确的尺寸（因此从height: 0 切换到height: auto 不会产生动画效果）。使用精确的高度非常棘手，如果您更改了内容，它会立即中断。所以你有两个选择：在<ul> 的不透明度上执行一个不太完美的过渡（淡入效果），或者使用 jQuery 在打开 JavaScript 的情况下为访问者添加一个向下滑动的效果。

如果您将 CSS 更改为：

li.sub ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease; 
}

li.sub:hover ul {
    opacity: 1;
    height: auto;
}

ul 的空间将“弹出”到视图中，然后内容将淡入。

或者，您可以使用 jQuery 来添加一个 slideDown 效果：

$(document).ready(function() {
    $('.sub').hover(function() {
    $(this).find('ul').show();
}, function() {
    $(this).find('ul').hide();
});
});

然后将您的 CSS 规则更改为：

li.sub ul.sub-menu {
    display: none;
}

（不再需要 :hover 规则。）这对您来说可能看起来更优雅。如果您选择此路线，请务必创建一个后备方案，为未打开 JavaScript 的访问者“取消写入”display:none; 规则，否则他们将看不到任何内容！