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

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

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

然后将这些声明添加到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的访问者添加下滑效果。< / p>

如果您将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;
}

（不再需要：悬停规则。）这可能看起来更优雅。如果您选择此路线，请确保为未启用JavaScript的访问者“取消”display:none;规则“创建后备广告，否则他们将看不到任何内容！

在列表中显示下拉列表ul

1 个答案: