sub menu dissapear when too far down

Question

i'm pretty new to css.

i'm trying to create a sub menu but while hover the main menu. But the whole sub menu keep dissapearing when i hover on second menu

this is my html

<ul id='drop-nav'>

 <li><a href='#'>Running Gear</a>
<ul>
  <li/>
  <li/>
  <li><a href='#'>Clothing</a></li>
  <li><a href='#'>Shoes</a></li>
  <li><a href='#'>Packs</a></li>
  <li><a href='#'>Electronics</a></li>
  <li><a href='#'>Accessories</a></li>
</ul>

and my css

<style type='text/css'>

ul {list-style: none;margin: 0px;
border-radius: 10px;}     
 ul li {display: block;position:relative;float: left;}
       li ul {display: none;}
 ul li a {display: block;text-decoration: none;
       white-space: nowrap;color: #fff;  }
 ul li a:hover {background: #F7AFB0;}
li:hover ul {display: block; position:absolute;}
  li:hover li {float: none;}
  li:hover a {background: #F7AFB0;}
  li:hover li a:hover {background: #7fceef;}
 #drop-nav li ul li {border-top: 0px;}

li:not(:hover) li {display: none;}

</style>

any idea what's causing it?

Answer 1

Try doing something like this. Your HTML is not properly nested. Compare your code to mine and you should be able to see what you've done wrong.

You just need to style this code to suit your needs. The dropdown works correctly.

CSS

ul{
    list-style: none;
}
ul li{
    float: left;
}
ul li a{
    display: block;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: block;
}

HTML

<ul>
    <li>
        <a href="#">Running Gear</a>
        <ul>
            <li><a href="#">Clothing</a></li>
            <li><a href="#">Shoes</a></li>
            <li><a href="#">Packs</a></li>
        </ul>
    </li>
</ul>