オーバーフローオートで水平メニューに隠されたサブナビゲーション

Question

サブナビゲーションリストが1つの単純な水平メニューを作成しましたが、サブナブを表示する手間がかかりました。私はoverflow：autoディレクティブに従って、このメニューが.wrapperによって切り捨てられていることを知っています。

私は目標を達成するために何かできますか？ .wrapper構造は次のようになります ----- ------ | LOGO NAV ICONS | ----- ------ ロゴは左側にあり、横にはサブメニュー付きのナビゲーションリストがあります。右側にアイコンが表示されます。

私の問題はここに表示されます：https://jsfiddle.net/4mor5g80/2/ ヒント/アイデアはありますか？

おかげで、 ヤクブ

Answer 1

は、内部のすべての要素がfloatなどを持っているので、それのコンテンツの高さを持つように、あまりにも.wrapperにfloat:left;width:100%を設定する.wrapperニーズを必要とし、またoverflow:visible代わりのauto

を設定しました

body { 
 
    background: #fff; 
 
} 
 

 
div.wrapper { 
 
    background: #2e2e2e; 
 
    min-height: 10px; 
 
    overflow: visible; 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
div.wrapper .info {float: right;} 
 

 
div.wrapper .logo { 
 
    float: left; 
 
    margin-right: 2em; 
 
    min-height: 10px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 10px 0; 
 
    float: left; 
 
} 
 
ul li ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 10px 0; 
 

 
} 
 

 
li { 
 
    display: inline; 
 
    padding: 10px 0; 
 
    position: relative; 
 
} 
 

 
li a { 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: green; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    top: 100%; 
 
    left: 0; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
ul li:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
h3 { 
 
    clear: both; 
 
} 
 
}

<div class="wrapper"> 
 
<p class="logo">logo</p> 
 
<ul> 
 
    <li><a class="active" href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li> 
 
    <a href="#">Dropdown</a> 
 
    <ul class="dropdown-content"> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="info"><a href="a">Test</a></div> 
 
</div> 
 
<h3>Dropdown Menu inside a Navigation Bar</h3> 
 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>