2

水平サブメニューを持つ純粋な HTML/CSS メニューを構築しています。問題は、サブメニューにカーソルを合わせているときに、メインメニュー項目のホバーからの背景色がなくなることです。

サブメニューにカーソルを合わせているときに、メイン メニュー項目の背景色を維持することは可能ですか?

これが私がこれまでに得たものです：

http://jsfiddle.net/YKEkB/1/

「this is the one」にカーソルを合わせるとわかるように、サブメニューが表示されます。ただし、サブメニューにいると、「これは 1 つです」の背景色が元に戻ります。

純粋な HTML/CSS を使用したソリューションはありますか?

これはすべてのコードです：

 <div class="wrapper">
    <div class="menu-holder">
        <ul class="menu">
            <li><a href="#" title="Home">item 1</a>
            </li>
            <li><a class="test" href="#">This is the one</a>

                <ul class="submenu">
                    <li><a href="#">Submenu item 1</a>
                    </li>
                    <li><a href="#">Submenu item 2</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" >Menu item 3</a>

            </li>
            <li><a href="#" >Last item</a>

            </li>
        </ul>
    </div>
</div>

CSS:

 .wrapper {
     width:900px;
     height:200px;
     background:grey;
 }
 .menu-holder {
     padding: 50px 0 0 0;
 }
 .menu-holder ul {
     margin: 0 0 0px 25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 10px 0 10px;
     margin: 0px 0 0 0px;
     border-left: 1px dotted white;
     line-height: 0px;
 }
 .menu-holder ul li a {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-style: bold;
     display: block;
     color: white;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li a:hover + ul {
     display: block;
 }
 .menu-holder ul li a:hover {
     display: block;
     background-color: #025179;
 }
 .menu-holder ul li .submenu {
     display: none;
     position: absolute;
     top: 100%;
     left: 0px;
     right: auto;
     margin: -5px 0 0px 0px;
     padding: 5px 10px 5px 10px;
     white-space: nowrap;
 }
 .menu-holder ul li .submenu li {
     position: static;
     float: left;
     display: inline;
     padding: 15px 10px 15px 10px;
     background-color: #025179;
 }
 .menu-holder ul li .submenu li a {
     display: inline;
     margin: 0 0px 0 0px;
     padding: 0px 10px 0px 10px;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holder ul li .submenu li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li .submenu li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li .submenu:hover {
     display: block;
 }
 .menu-holder ul li .submenu:hover .test {
     display: block;
     background-color: #025179;
 }
 .menu-wrapper .menu-holder ul li:first-of-type {
     border-left: none;
 }
4

1 に答える 1

3

簡単: http://jsfiddle.net/YKEkB/2/

これを次のように変更する必要があります (a を削除します)。

 .menu-holder ul li:hover{
   display: block;
   background-color: #025179;
   }

次に、垂直方向の中央になるように調整する必要があります。メニュー項目とサブメニューの間に 0px を保持する必要があることに注意してください。

さらに多くのこと。

疑似要素を使用して、最後の項目に点線:last-childを追加できます( fiddle 3 を参照)。

 .menu-holder ul li:last-child {
   border-right: 1px dotted white;
   }

私が正しければ、ドロップダウン メニューの最後の要素と最初の要素の2 番目の角だけを丸めたいと思っていました。

 .menu-holder ul li ul li:first-of-type {
   -webkit-border-radius: 0px 5px 0px 0px;
   border-radius: 0px 5px 0px 0px;
 }

 .menu-holder ul li .submenu li:last-of-type {
   -webkit-border-radius: 0px 0px 5px 5px;
   border-radius: 0px 0px 5px 5px;
 }

次のようにサブメニューにアクセスできます（アクセスする必要があります）：

 .menu-holder ul li ul {

これの代わりに：

.menu-holder ul li .submenu {

さらにいくつかのことをきれいにして触れました。ここでコードが機能しています。何か問題があれば言ってください。まだ改善の余地があります (読みやすさと DRY など)。

最終デモ

于 2013-05-02T22:53:02.133 に答える