PureCSS and CSS menu dropdowns

Question

I'm trying to use PureCSS, and get menudrop downs using CSS (rather than via either YUI or Jquery for portability reasons).

This is what I have so far:

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>

and:

@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;
}

I think the underlying problem may be some subtly in purecss that causes the second level menu not to display.

Ignore the extra classes - they represent earlier stages of getting this to work with YUI or JQuery.

score 1 · Answer 1 · answered Dec 30 '14 at 11:13

1

You have to set the visibility of your subnavigation to visible.

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

Example: http://jsfiddle.net/ket262p3/6/

answered Dec 30 '14 at 11:13

SKeurentjes

1,848
12
18

Thank you - that works fine - except for one issue. On some browsers (and apparently depending on the mix of css) the dropdown disappears as soon as I try to move the mouse down it (i.e not hovering on top any longer). – cbz Dec 30 '14 at 11:37
That's because the whitespace between your navigation and subnavigation. Set the top of your subnavigation (.pure-menu-horizontal ul ul) the same as the height of the navigation item. – SKeurentjes Dec 30 '14 at 12:19

score 1 · Answer 2 · answered Jan 01 '15 at 11:03

On further investigation it appears that a lot of the infrastructure for doing this is already built into PureCSS, but not documented very well. I replicate the solution below so that other people can find it.

The main solution is documented here: https://gist.github.com/maxbeatty/7829915

I have replicated in a jsfiddle: http://jsfiddle.net/0562cqd8/1/

The html is as follows

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

With CSS like this:

@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;
}

This works perfectly in PureCSS 0.5.0 but fails in version 0.6.0. Any quick suggestions on what needs changing? — CXJ, Jul 01 '16 at 01:13

score 0 · Answer 3 · answered Dec 30 '14 at 11:26

Please try this 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;
}

change the color as per your requirement

PureCSS and CSS menu dropdowns

3 Answers3