html - css 下拉菜单只显示最后一个列表项

Question

我的下拉菜单只显示最后一个下拉元素。我知道我的 CSS 有问题，但我无法弄清楚。有人可以帮忙吗？提前致谢。

这是 HTML:

<div class="menuBar">
    <nav class="Menu"> 
    <ul class="main">
    <li><a href="http://www.lombardisonthebay.com/" class="active">Home</a></li>
    <li><a href="wedding.html">Weddings</a>
        <ul>
        <li><a href="wedding-gallery.html">Gallery</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        </ul>
    </li>
    <li><a href="restaurant.html">Restaurant</a>
        <ul>
        <li><a href="restaurant-gallery.html">Gallery</a></li>
        </ul>
    </li>
    <li><a href="social.html">Special Occasions</a></li>
    <li><a href="corporate.html">Corporate</a></li>
    <li><a href="upcoming.html">Upcoming Events</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="locations.html">Our Locations</a></li>
    </ul>
    </nav>
 </div>

这是 CSS:

nav.Menu {
    text-align: center;
    margin-top: 14px;
}

nav.Menu .main li {
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 5px 20px;
    cursor: pointer;
}

nav.Menu .main li ul li {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    display: none;
    opacity: 0;
    visibility: hidden;
}

nav.Menu .main li ul li { 
    background: #83562c; 
    display: block; 
    color: #fff;
    margin-top: -2px;
    z-index: 1000 !important;
}

nav.Menu .main li:hover ul li { 
    background: #83562c; 
}

nav.Menu .main li:hover ul li {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index:99;
}

nav.Menu a {
    color: #fff;
    font: bold 13px/42px Arial, Helvetica, sans-serif;
    padding: 0 10px;
    text-align: center;
}
nav.Menu a:hover    { 
    color: #eacc90;
}

Answer 1

Huangism 是对的，您对 position:absolute 的使用破坏了下拉列表。我在下面重写了你的 CSS JSFiddle ，但它仍然是 hackish。

我建议阅读下拉菜单:

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

http://cssdeck.com/labs/another-simple-css3-dropdown-menu