ドロップダウンサブメニューが動作しません

Question

私はかなりhtmlとCSSに新しく、ナビゲーションバーのサブメニュー付きのドロップダウンメニューを作成しようとしていますが、私のサブメニューの問題は表示されません。私はオンラインでいくつかの方法を試しましたが、それを正しくすることはできません。 、

.NavMenu li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.NavMenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: Crimson; 
 
} 
 
.NavMenu li { 
 
    float: left; 
 
    display: inline; 
 
} 
 
.NavMenu li a:hover { 
 
    background-color: #111; 
 
} 
 
.NavMenu ul ul { 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.NavMenu ul ul ul { 
 
    left: 100%; 
 
    top: 0; 
 
    display: float; 
 
} 
 
.NavMenu li:hover > ul { 
 
    display: block; 
 
}

<nav class="NavMenu"> 
 
    <ul> 
 
    <li> <a href="EngHome.html"> My Bilingual Library </a> 
 
    </li> 
 
    <li> <a> Find Books </a> 
 
     <ul> 
 
     <li> <a href="Elementary.html"> Elementary </a> 
 
      <ul> 
 
      <li> <a href="ElemPict.html"> Picture Books </a> 
 
      </li> 
 
      <li> <a href="ElemFict.html"> Fiction Books </a> 
 
      </li> 
 
      <li> <a href="ElemNFict.html"> Non-Fiction Books </a> 
 
      </li> 
 
      <li> <a href="ElemChapt.html"> Chapter Books </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li> <a href="MidSchool.html"> Middle School </a> 
 
      <ul> 
 
      <li> <a href="MidAdventure.html"> Adventure </a> 
 
      </li> 
 
      <li> <a href="MidFantasy.html"> Fantasy </a> 
 
      </li> 
 
      <li> <a href="MidNonFict.html"> Non-Fiction </a> 
 
      </li> 
 
      <li> <a href="MidRealFict.html"> Realistic Fiction </a> 
 
      </li> 
 
      <li> <a href="MidBiography.html"> Biography </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li> <a href="HighSchool.html"> High School </a> 
 
      <ul> 
 
      <li> <a href="HighAdven.html"> Adventure </a> 
 
      </li> 
 
      <li> <a href="HighFantasy.html"> Fantasy </a> 
 
      </li> 
 
      <li> <a href="HighThrill.html"> Thriller </a> 
 
      </li> 
 
      <li> <a href="HighMystery.html"> Mystery </a> 
 
      </li> 
 
      <li> <a href="HighPoetry.html"> Poetry </a> 
 
      </li> 
 
      <li> <a href="Comedy.html"> Comedy </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </li> 
 
    <li> <a href="Favorites.html"> Favorites </a> 
 
    </li> 
 
    <li> <a href="Contact.html"> Contact </a> 
 
    </li> 
 
    <li> <a href="Howto.html"> How to </a> 
 
    </li> 
 
    <li style="float:right"> <a href="SpanHome.html"> Espa&#241;ol? </a> 
 
    </li> 
 

 
    </ul> 
 
</nav>

この作品を作るためのアドバイスの任意の並べ替えをいただければ幸いです、あなたが信じるならば、私はそれをすべて廃止して最初からやり直すだけのはずです。

はここでCSSとHTMLであります私にそう言ってください。ありがとうございました。 Here is a screenshot of the menu

Answer 1

このコードを試してください。

NavMenu ul ul { 
    position: relative; 
    display: none; 
} 

は、あなたのネストされたリストが表示され、彼らはあなたがそれらをしたいどのように合わせて、あなたはその直後もう少しスタイリングを台無しにする必要がありますになりhttp://codepen.io/nehemc/pen/yJbRgaabsoluteからここrelativeに変更

<style> 
.NavMenu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: Crimson; 
    display: inline-block; 
    width: 100%; 
} 
.NavMenu li { 
    float: left; 
    position:relative; 
} 
.NavMenu li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 
.NavMenu li a:hover { 
    background-color: #111; 
} 
.NavMenu ul ul { 
    position: absolute; 
    display: none; 
    left:0; 
    z-index:999; 
} 
.NavMenu ul ul li { 
    float:none; 
} 
.NavMenu ul ul ul { 
    left: 100%; 
    top: 0; 
    display: float; 
} 
.NavMenu li:hover > ul { 
    display: block; 
} 
</style> 
<nav class="NavMenu"> 
<ul> 
    <li> <a href="EngHome.html"> My Bilingual Library </a> </li> 
    <li> <a> Find Books </a> 
    <ul> 
     <li> <a href= "Elementary.html"> Elementary </a> 
     <ul> 
      <li> <a href= "ElemPict.html"> Picture Books </a> </li> 
      <li> <a href= "ElemFict.html"> Fiction Books </a> </li> 
      <li> <a href= "ElemNFict.html"> Non-Fiction Books </a> </li> 
      <li> <a href= "ElemChapt.html"> Chapter Books </a> </li> 
     </ul> 
     </li> 
     <li> <a href= "MidSchool.html"> Middle School </a> 
     <ul> 
      <li> <a href= "MidAdventure.html"> Adventure </a> </li> 
      <li> <a href= "MidFantasy.html"> Fantasy </a> </li> 
      <li> <a href= "MidNonFict.html"> Non-Fiction </a> </li> 
      <li> <a href= "MidRealFict.html"> Realistic Fiction </a> </li> 
      <li> <a href= "MidBiography.html"> Biography </a> </li> 
     </ul> 
     </li> 
     <li> <a href= "HighSchool.html"> High School </a> 
     <ul> 
      <li> <a href= "HighAdven.html"> Adventure </a> </li> 
      <li> <a href= "HighFantasy.html"> Fantasy </a> </li> 
      <li> <a href= "HighThrill.html"> Thriller </a> </li> 
      <li> <a href= "HighMystery.html"> Mystery </a> </li> 
      <li> <a href= "HighPoetry.html"> Poetry </a> </li> 
      <li> <a href= "Comedy.html"> Comedy </a> </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li> <a href="Favorites.html"> Favorites </a> </li> 
    <li> <a href="Contact.html"> Contact </a> </li> 
    <li> <a href="Howto.html"> How to </a> </li> 
    <li style= "float:right"> <a href="SpanHome.html"> Espa&#241;ol? </a> </li> 
</ul> 
</nav> 

Answer 2

、