Question

我尝试使用PureCSS，并使用CSS（而不是通过YUI或Jquery出于可移植性原因）获得menudrop。

这是我到目前为止所做的：

<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/

Answer 2

在进一步调查中，似乎很多基础设施已经内置到PureCSS中，但没有很好地记录。我复制下面的解决方案，以便其他人可以找到它。

主要解决方案在此处记录：https://gist.github.com/maxbeatty/7829915

我已经在jsfiddle中复制了：http://jsfiddle.net/0562cqd8/1/

html如下

<!-- includes pure-min.css -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<a href="/" class="pure-menu-heading">Heading</a>
<ul class="pure-menu-children">
<li class="pure-menu-can-have-children pure-menu-selected">
<a href="/cars" class="pure-menu-label">Cars</a>
<ul>
<li>
<a href="/cars?color=blue">Blue</a>
</li>
<li>
<a href="/cars?color=red">Red</a>
</li>
<li>
<a href="/cars?color=green">Green</a>
</li>
</ul>
</li>
<li>
<a href="/trucks">Trucks</a>
</li>
</ul>
</div>

使用这样的CSS：

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

.pure-menu-can-have-children:hover {
background: #eee;
}

.pure-menu-can-have-children:hover ul {
top: 35px; /* height of menu li */
left: 0;
visibility: visible;
border: 1px solid #b7b7b7;
background: #fff;
}

Answer 3

请试试这个css

.pure-menu ul
{
margin:0;
padding:0;
float:left;
width:100%;
}
.pure-menu ul > li
{
margin:0;
padding:0;
float:left;
list-style:none;
position:relative;}
.pure-menu ul > li >a
{
margin:0;
padding:0;
float:left;
padding:8px 4px;
text-decoration:none;
color:red;}
.pure-menu ul > li > ul
{
position:absolute;
top:100%;
left:0;
display:none;
width:200px;
}
.pure-menu ul > li > ul >li
{
width:100%;
}
.pure-menu ul > li > ul >li >a
{
padding:8px 20px;
background:red;
color:#fff;}
li.pure-dropdown:hover ul {
display:block;
}

根据您的要求更改颜色

PureCSS和CSS菜单下拉菜单

3 个答案: