Question

我正在创建一个new drop-down menu，但似乎无法使嵌套的uls可见。

Here's the test page您可以将鼠标悬停在“活动”部分上，但不起作用。

这是html：

<div class="menu clearfix">
      <ul class="menu dropdown dropdown-linear dropdown-columnar">
        <li class="community"><a class="events_link" href="/events/index.html">Events</a>
            <ul>
            <li><a href="./">Menu Subitem #1</a></li>
            <li><a href="./">Menu Subitem #2</a></li>
            <li><a href="./">Menu Subitem #3</a></li>
            <li><a href="./">Menu Subitem #4</a></li>
        </ul>
        </li>
    </ul>
  </div>

这是嵌套ul的CSS：

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

我没有把它全部发布，因为有负载，但是如果您需要更多可能需要使用检查员来查看其余部分，请告诉我。

任何帮助都非常感激。

Answer 1

也许是因为你没有添加宽度ti li元素？尝试：

width:100px;

请看这个http://jsfiddle.net/brightlycolor/ktxHm/11/这很好用

Answer 2

您需要从overflow:hidden删除/更改header-wrapper。它使子内容（您的菜单）被隐藏，因为它们在技术上是溢出的内容。

下拉菜单不显示子列表

2 个答案: