1

我正在尝试使用 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 的早期阶段。

4

3 回答 3

1

在进一步的调查中，许多用于执行此操作的基础设施似乎已经内置在 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;
}
于 2015-01-01T11:03:06.203 回答
1

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

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

示例：http: //jsfiddle.net/ket262p3/6/

于 2014-12-30T11:13:55.940 回答
0

请试试这个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;
}

根据您的要求更改颜色

于 2014-12-30T11:26:45.577 回答