ドロップダウンリストが表示されない、何が間違っているのですか

Question

私はホバー上で純粋なcss drowndownメニューを作る方法についてtutorialに従っています。 何度も何度もそれを走らせた後も、私はまだまだ立ち往生しており、私の問題についての良い説明を得ることを望んでいます。

  <div class="navbar"> 
       <ul> 
        <li> 
        <div><a href="3d.html">3D Printing</a></div> 
         <ul> 
          <li> 
          <div><a href="#">blah</a></div> 
          </li><li> 
          <div><a href="#">blah</a></div> 
          </li><li> 
          <div><a href="#">blah</a></div> 
          </li> 
         </ul> 
        <li> 
        <div><a href="#"></a></div> 
        </li><li> 
        <a href="#"></a> 
        </li> 
       </ul> 
      </div> 

これはHTMLだと思います。

.navbar ul { 
    position: relative; 
    display: inline-block; 
    font-family: lemon; 
    list-style: none; 
    padding: 15px 0px; 
    font-size: 210%; 
    margin-left: 3%; 
    } 

    .navbar ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
    } 

    .navbar ul li { 
    display: block; 
    } 

    .navbar ul ul { 
    display: none; 
    font-size: 100%; 
    padding: 18px 5px; 
    } 

    navbar ul li:hover ul { 
    display: block; 
    } 

    .navbar ul ul li { 
    background: rgba(0,0,0,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    } 

    .navbar ul ul li:hover { 
    background: rgba(0,0,0,0.4) 
    } 

    .navbar ul li a { 
    display: block; 
    text-decoration: none; 
    color: white; 
    opacity: 0.8; 
    } 

    .navbar ul li a:hover { 
    opacity: 1; 
    } 

問題はここのどこかにあるが、私はそれを見つけることができない、あなたの助けに感謝されます！

ありがとうございました。私の誠実なご挨拶に感謝します。

レイモンド・ザ・ハマー

Answer 1

navbar ul li:hover ul { 
display: block; 
} 

あなたはdivul li内部タグを使用していない、ナビゲーションバーclass

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

jsFiddle

ノートのdotを逃しました！

Answer 2

これを試してください：

<div class="navbar"> 
      <ul> 
       <li> 
       <a href="3d.html">3D Printing</a> 
        <ul> 

         <li><a href="#">blah</a></li> 

         <li><a href="#">blah</a></li> 

         <li><a href="#">blah</a></li> 

        </ul> 
        </li> 

      </ul> 
     </div> 

CSS：

.navbar ul { 
    position: relative; 
    display: inline-block; 
    font-family: lemon; 
    list-style: none; 
    padding: 15px 0px; 
    font-size: 210%; 
    margin-left: 3%; 
    } 

    .navbar ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
    } 

    .navbar ul li { 
    display: block; 
    } 

    .navbar ul ul { 
    display: none; 
    font-size: 100%; 
    padding: 18px 5px; 
    } 

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

    .navbar ul ul li { 
    background: rgba(0,0,0,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.05); 
    } 

    .navbar ul ul li:hover { 
    background: rgba(0,0,0,0.4) 
    } 

    .navbar ul li a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    opacity: 0.8; 
    } 

    .navbar ul li a:hover { 
    opacity: 1; 
    }