html - 下拉菜单不显示子列表

Question

我正在创建一个新的下拉菜单，但似乎无法使嵌套的 uls 可见。

这是测试页面，您可以将鼠标悬停在“事件”部分上，但它不起作用。

这是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

也许是因为您没有添加 width ti li 元素？尝试：

width:100px;

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

Answer 2

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