0

私はすべてを試しましたが、iamはこれに固執しました。ul liにカーソルを合わせると、ululliが表示されます。私が何をする必要があるかを見ることができる人はいますか？私は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; }
4

1 に答える 1

0

複雑な子孫セレクターがたくさんありますが、これが問題だと思います。

まず、の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">に入れます。

それはChrome25で私のために働きます。これはあなたが求めているものですか？

トランジション

このシナリオで実行できる遷移のタイプには、いくらか制限があります。CSSトランジションはdisplayルールでは機能せず、height正確なサイズを使用しない限り機能しません（したがって、からheight: 0に切り替えるheight: autoとアニメーション化されません）。正確な高さを使用するのはかなり難しいので、コンテンツを変更するとすぐに壊れてしまいます。したがって、2つのオプションがあります。<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ルールは不要になりました。）それはあなたにとってよりエレガントに見えるかもしれません。このルートを選択する場合は、display:none;JavaScriptがオンになっていない訪問者のルールを「上書き」するフォールバックを作成してください。そうしないと、訪問者には何も表示されません。

于 2013-03-25T00:31:46.677 に答える