CSSを使用してホバー上のメニューをドロップダウン

Question

誰かが私のコードのバグを見ることができるかどうか私は明らかに見ていないのだろうか。私は、ホバー上に表示される 'ブランド'の下にサブメニューを持つ簡単なナビゲーションバーを作成しようとしています。メニューが間違っている、または何が起こっているのかわからないどんな助けもありがとう。

<div class="nav"> 
     <ul> 
      <li> <a href="#"> Home </a> </li> 
      <li> <a href="#"> History </a> </li> 
      <li> <a href="#"> Brands </a> </li> 
       <ul> 
        <li> <a href="#"> Proprietary Brands </a> </li> 
        <li> <a href="#"> Licenced Brands </a> </li> 
        <li> <a href="#"> Distributed Brands </a> </li> 
       </ul> 
      <li> <a href="#"> Corp. Info </a> </li> 
      <li> <a href="#"> Investors </a> </li> 
     </ul> 
    </div> 



.nav{ 
    width: 100%; 
} 

.nav ul{ 
    font-size: 1.2em; 
    text-align: right; 
    padding-right: 5%; 
    padding-top: 2%; 
    list-style: none; 
} 

.nav li { 
    text-decoration: none; 
    padding-left: 2%; 
    display: inline-block; 
} 

.nav li li{ 
    font-size: 1em; 
} 

.nav li ul{ 
    position: absolute; 
    display: none; 
    width: inherit; 
} 

.nav li:hover ul{ 
    display: block; 
} 

.nav li ul li{ 
    display: block; 
} 

Answer 1

あなたのHTMLが少しだけ間違ってありがとう、それはあなたがあまりにもすぐのコンテナである必要があり李タグを閉じ意味代わり

... 
    <li> 
     <ul> ... </ul> 
    </li> 
... 

... 
    <li> ... </li> 
    <ul> ... </ul> 
    <li> ... </li> 
... 

する必要があります.nav li ulのCSSを作成し、そのような構造が存在しないため無効なものがあるあなたのhtmlで