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

Posted 2023-04-13

【中文标题】css下拉菜单仅显示最后一个列表项

【英文标题】：css drop down menu is only showing last list item

【发布时间】：2015-05-31 00:32:11

【问题描述】：

我的下拉菜单只显示最后一个下拉项目。我知道我的 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;

【问题讨论】：

您的子菜单列表项是绝对定位的，因此它们都堆叠在一起。这是您当前代码的小提琴jsfiddle.net/7zLbq0b2

当我使它们相对时，主菜单消失。

请帮我解决我弄的这个烂摊子。

【参考方案1】：

Huangism 是对的，您对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

【讨论】：

谢谢！我相信这些文章是我一开始就陷入这个烂摊子的原因。再次感谢！

【参考方案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;