順序付けられていないリストを使用せずにCSSでサブメニューを表示

Question

CSSでサブメニューを表示することに関して質問がありました。私は、例えば<ul>形式に私の構造を変更することはできません実装上の制限に

<div class="navigation"> 
    <a class="active" href="/">Home</a> 
    <a href="/">Test1</a> 
    <a href="/">Test2</a> 
    <div class="submenu-wrapper"> 
     <a href="/">Test3</a> 
     <div class="submenu"> 
     <a href="/">Submenu1</a> 
     <a href="/">Submenu2</a> 
     </div>  
    </div> 
    <a href="/">Test4</a> 
</div> 

： は、私は、次のHTMLコードを持っています。

CSSを使用してサブメニューを表示する方法を調べるために、ウェブでいくつかの調査を行いました。これが動作しないとどのように私は私の現在の実装に関して、この問題を解決することができ、なぜ

.navigation .submenu-wrapper a:hover > .submenu{display:block;} 

は誰もが私に伝えることができます：私は、次のことを試してみました。ここ

全コード：JSFIDDLE

PS。使用ブートストラップのような任意の答えや<ul>形式にメニューを変換する私が探しているものではありません。）

Answer 1

あなたのコード：

.navigation .submenu-wrapper a:hover > .submenu{display:block;} 

あなた.submenuがaの内側ではありません。それを固定高さや:after{clear:both;}を与えることによって、（あなたの.submenu-ラッパーはその内容と同じ高さを持っていることを確認し、サブメニューを使用可能にする

.navigation .submenu-wrapper a:hover + .submenu{display:block;} 

しかし、この操作を行います：あなたは、兄弟セレクタを使用することができ

を（あなたはそれを身体に top:100%相対を与えたので）

.navigation .submenu-wrapper:hover .submenu{display:block;} 

あなた.submenuが絶対的に配置されているので、あなたも、その親を配置する必要がある、または他の.submenuは、画面をオフに落ちるこのように：。

.navigation .submenu-wrapper {position: relative;} 

更新フィドル：https://jsfiddle.net/xrtjngdr/4/

Answer 2

ちょうど少数の小さな変化、あなたは黄金です。

変更点については、次のコードのコメントを参照してください。

.navigation { 
 
    margin: 0; 
 
    padding-left: 0; 
 
    list-style: none; 
 
    float: left; 
 
} 
 
.navigation .submenu-wrapper { 
 
    float: left; 
 
    display: block; 
 
    position: relative; /* add relative position */ 
 
} 
 
.navigation > a, 
 
.navigation .submenu-wrapper a { 
 
    float: left; 
 
    position: relative; 
 
    display: block; 
 
    font-size: 20px; 
 
    padding-right: 14px; 
 
    padding-left: 14px; 
 
    padding-top: 5.5px; 
 
    padding-bottom: 8.5px; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
.submenu { 
 
    position: absolute; 
 
    display: none; /* display none */ 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: 1000; 
 
    float: left; 
 
    min-width: 160px; 
 
    list-style: none; 
 
    font-size: 18px; 
 
    text-align: left; 
 
    background-color: #245d94; 
 
    border: 1px solid #fff; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 
.navigation a:hover { 
 
    color: #fff; 
 
    background-color: #245d94; 
 
} 
 
.navigation a.active { 
 
    color: #fff; 
 
    background-color: #e36c0a; 
 
} 
 
.navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */ 
 
    display: block; 
 
}

<div class="navigation"> 
 
    <a class="active" href="/">Home</a> 
 
    <a href="/">Test1</a> 
 
    <a href="/">Test2</a> 
 
    <div class="submenu-wrapper"> 
 
    <a href="/">Test3</a> 
 
    <div class="submenu"> 
 
     <a href="/">Submenu1</a> 
 
     <a href="/">Submenu2</a> 
 
    </div> 
 
    </div> 
 
    <a href="/">Test4</a> 
 
</div>

Answer 3

あなたはまた、

を追加する必要が .navigation .submenu-wrapper a:hover + .submenu{display:block;}

へ

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

を変更することによって、これを達成することができます0

あなたのサブメニューをクリックした場合、リンクが