0

CSS のみを使用して、このメニュー + サブメニューの組み合わせのホバーを維持するために次のコードを変更することは可能ですか? メインメニューまたはサブメニューのいずれかがホバーされている場合、サブメニューは表示されたままにする必要があります。現在、メイン メニューのホバーのみが機能しています。ありがとう！

以下のHTML + CSS：

<div id="dropnav">
    <ul>
        <li id="main"><a href="#">One</a></li>
        <li id="main"><a href="#">Two</a>
            <ul>
            <li><a href="#">Two A</a></li>
            <li><a href="#">Two B</a></li>
            <li><a href="#">Two C</a></li>
            <li><a href="#">Two D</a></li>
            </ul>            
        </li>
        <li id="main"><a href="#">Three</a></li>
        <li id="main"><a href="#">Four</a></li>
        <li id="main"><a href="#">Five</a></li>
    </ul>    
</div>

#dropnav {
height:50px;
width: 100%;
text-decoration: none;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}

#dropnav ul{
margin:0px;
padding:0px;
text-align: center;
}

#dropnav ul li{
display:inline; 
float:left; 
list-style:none; 
margin-left:auto; 
position:relative; 
height:25px; 
width: 20%;
font-size: 20px;
font-family: 'Cabin', Helvetica, Arial;
}

#dropnav ul li ul{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
z-index: 99;
top:50px;
}

#dropnav  ul li:hover > ul{
display:block;
width:500px;
left: -50%;
}

#dropnav ul li ul li:hover > a{
color:#FFFFFF;
text-decoration:none;
display:block;
width:500px;
left: -50%;
}
4

1 に答える 1

0

サブメニューのスタイルを次のように変更してみてください。

#dropnav ul li ul {
    margin:0px;
    padding:0px;
    display:none;
    position:relative;
    left:0px;
    z-index: 99;
    top:0px;
    padding-top: 50px;
}

デモフィドル

于 2013-09-06T19:59:30.917 に答える