Alexis T Alexis T - 5 months ago 10
HTML Question

Drop down sub-menu isn't working

I'm fairly new to html and css, and I'm trying to create a drop-down menu with sub-menus in it on a navigation bar, but I'm having the issue of my sub-menus not showing up. I've tried several methods online, but I can't seem to get it right.

Here is the CSS and HTML:



.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>





Any sort of advice to make this work would be greatly appreciated, if you believe I should just scrap it all and start over, feel free to tell me so. Thank you.
Here is a screenshot of the menu

Answer

Coluld you please try this code. http://codepen.io/nehemc/pen/yJbRga

<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>
Comments