css - PureCSS 和 CSS 菜单下拉菜单

Question

我正在尝试使用 PureCSS，并使用 CSS 获取菜单下拉菜单(出于可移植性原因而不是通过 YUI 或 Jquery)。

这是我目前所拥有的:

http://jsfiddle.net/ket262p3/3/

<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
      <li class="pure-dropdown">
          <a href="#">Test1</a>
          <ul>
            <li><a href="#.asp">Test2</a></li>
            <li class="pure-menu-separator"></li>
            <li><a href="#.asp">Test3</a></li>
          </ul>
     </li>               
     <li class="pure-dropdown">
       <a href="#">Test1</a>
       <ul>
       <li><a href="#">Test2</a></li>
       <li><a href="#">Test3</a></li>
       <li><a href="#">Test4</a></li>
       <li><a href="#">Test5</a></li>
       </ul>
    </li>
</ul>
</div>

和:

@import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");

.pure-menu-horizontal ul {
        padding:0;
        margin:0;
        font-weight: bold;
        width: 100%;
        position: relative;
        }

.pure-menu-horizontal ul li {
        float:left;
        position: relative;
        display: block;
        }

.pure-menu-horizontal ul li a {
        display:block;
}

.pure-menu-horizontal ul ul {
    display: block;
    position: absolute;
    top: 58px;
}

.pure-menu-horizontal ul li:hover > ul {
    display: list-item;
    left: auto;
}

我认为潜在的问题可能是purecss中的一些微妙导致二级菜单不显示。

忽略额外的类 - 它们代表使它与 YUI 或 JQuery 一起工作的早期阶段。

Answer 1

您必须将子导航的可见性设置为可见。

.pure-menu-horizontal ul li:hover > ul {
    display: list-item;
    left: auto;
    visibility: visible;
}

例子: http://jsfiddle.net/ket262p3/6/