为什么我的下拉列表没有显示在导航下方？

Question

在“商店”标签上，我有5个下拉选项，链接到商店页面上特定部分的内容。然而，我的代码似乎不起作用，因为当您在主页上将鼠标悬停在商店标签上时，导航将与导航的其余部分一起显示为内嵌，而我希望内容显示在商店的下方作为下面的清单。

这是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"> get involved </a></li>
<li><a href="contact.html"> contact us</a></li>
</ul>
</div>

</pre>

这是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 a {
    line-height: 120%;
    padding: 10px 15px;
}

#navigation ul ul ul {
    top: 0;
    left: 100%;
}

#navigation ul li:hover > ul {
    display: block;
}

我有一种感觉，它不起作用的原因是我的代码在我的css顶部的原始导航栏的样式。非常感谢任何帮助

编辑：这是整个导航的css的其余部分：

* {
    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 a { 
    text-decoration: none; color:white; 
}

a:visited { 
    text-decoration: none; 
}