html - Why are my drop-down lists not appearing below my navigation? -

on 'shop' tab have 5 drop down options link specific part of content on shop page. code not seem work, when hover on shop tab when on home page, navigation appears inline rest of navigation, whereas content display below word shop drop-down list.

this html

<pre> <div id="navigation">  <ul class="nav-bar"> <li><a href="index.html">home</a></li> <li class="current"><a href="shop.html">shop</a> <ul> <li><a href="#vintage">vintage collection</a></li> <li><a href="#sofas">sofas & beds</a></li> <li><a href="#tables">tables & chairs</a></li> <li><a href="#electricals">electricals</a></li> <li><a href="#storage">storage</a></li> </ul> </li> <li><a href="about.html">about</a></li> <li><a href="getinvolved.html"> involved </a></li> <li><a href="contact.html"> contact us</a></li> </ul> </div>  </pre> 

and css

    /* drop down list */   #navigation ul ul {     display: none;     top: 100%;     left:0;     background:#a3cc39;     padding: 0;     align-content: center;     width: 100%; }  #navigation ul ul li {     float: none;     width: 100%;     margin-left:0px;  }  #navigation ul ul {     line-height: 120%;     padding: 10px 15px; }  #navigation ul ul ul {     top: 0;     left: 100%; }  #navigation ul li:hover > ul {     display: block; } 

i have feeling reason isn't working code @ top of css styles original navigation bar. appreciate help

edit: rest of css navigation whole:

* {     margin:0;     border:0;     padding:0;  }  .wrapper {     max-width: 1000px;     margin: 0px auto;     clear: both;     text-align: center; }  li {     display: inline;     list-style-type: none;  }  #navigation a:hover{     color: black;     background-color: #6a8f28; }  #navigation {      text-decoration: none; color:white;  }  a:visited {      text-decoration: none;  }