2017-04-14 16 views
1

HTMLサブメニューが

.nav-list li{ 
    display:inline; 
} 

li a{ 
    color:white; 
    text-decoration: none; 
    font-size:24px; 
    line-height: 20px; 
    margin:0 5%; 
} 

li a:hover , li a:active { 
    color: #f23c48; 
} 

.dropdown ul{ 
    display:none; 
} 

.dropdown:hover > ul { 
    display:block; 
    position: absolute; 
} 

.dropdown ul li { 
    display:block; 
} 

は、私は右のドロップダウン「メニュー3」の親メニューの下に表示するサブメニューを取得することができません

<nav class="row-nav"> 
    <ul class="nav-list"> 
     <li><a href=#> menu 1 </a></li> 
     <li><a href=#> menu 2 </a></li> 
     <li class="dropdown"> 
      <a href=#> menu 3 </a> 
      <ul> 
       <li><a href=#> submenu 1 </a></li> 
       <li><a href=#> submenu 2 </a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSSドロップダウンメニューの下に表示されません。私はスタックのオーバーフローに関する同様の質問を見直しましたが、まだ適切な解決策を見つけることができません。

+0

それはフィドルに罰金働いていますか? https://jsfiddle.net/d5uvL1jp/2/アンカーされたリストの項目に白の色があるので、それを見ることができなかったかもしれません – Jorden1337

答えて

0

それは親の絶対位置が機能するためには、relativeまたはabsoluteのいずれかの位置を持っている必要があり、blockまたはinline-blockのいずれかである必要があります。また、デフォルトのリストスタイルをオーバーライドする必要があります。これは、リスト要素の左側にデフォルトでパディングがあるためです。

.nav-list > li { 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
} 
 

 
li a { 
 
    color: black; 
 
    text-decoration: none; 
 
    font-size: 24px; 
 
    line-height: 20px; 
 
} 
 

 
li a:hover, 
 
li a:active { 
 
    color: #f23c48; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
} 
 

 
.dropdown ul { 
 
    display: none; 
 
    list-style: none; 
 
    position: absolute; 
 
    padding: 0; 
 
} 
 

 
.dropdown:hover > ul { 
 
    display: block; 
 
}
<nav class="row-nav"> 
 
    <ul class="nav-list"> 
 
    <li><a href=#> menu 1 </a></li> 
 
    <li><a href=#> menu 2 </a></li> 
 
    <li class="dropdown"> 
 
     <a href=#> menu 3 </a> 
 
     <ul> 
 
     <li><a href=#>sub 1</a></li> 
 
     <li><a href=#>sub 2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

+0

ありがとうございます。出来た。 – rosny

関連する問題