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

黄教是对的，你使用position:absolute打破了下拉。我在以下JSFiddle中重写了您的CSS，但它仍然是hackish。

我建议您在下拉菜单上阅读一些内容：

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

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

Answer 2

把我逼到绝望的境地，但又有一点棘手的位置：绝对确实有效http://jsfiddle.net/z509cjmg/3/。从此处改编：http://cssdeck.com/labs/multi-level-dropdown-menu

.navmenu ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 1s ease;
  margin-left: 142px;
  margin-top: -30px;

}

css下拉菜单仅显示最后一个列表项

2 个答案: