purecss pure-menu-item doesn't work properly

Question

This menu code is the first example in http://purecss.io/menus/.

Yet it works bad :(

Each <li> item stays a screenful of distance one another. If you scroll down you see the other items.

But it works in the purecss.io/menus page. I don't know why.

(Here when you run it works fine too… You have to create an html document with this code, then it fails…)

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
</head>

<body>
  <div class="pure-menu">
    <span class="pure-menu-heading">Yahoo Sites</span>

    <ul class="pure-menu-list">
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a>
      </li>
      <li class="pure-menu-heading">More Sites</li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a>
      </li>
    </ul>
  </div>
</body>

</html>

I've seen that pure-menu-item has a height: 100%, which I think is a bit strange. Is this the problem?

Maybe I misunderstood the question, but it seems to be working fine, see http://jsfiddle.net/yr4hgvr1/. — pschueller, Mar 13 '15 at 22:01
Yeap. I was adding as a snippet and it works fine here too. But if you put only it in a html document it fails… I don't know why — ijverig, Mar 13 '15 at 22:04
I tried running it in a html document and got the same error... That's so strange... — bmpasini, Mar 13 '15 at 22:14
I can't seem to reproduce the problem, can you post your complete HTML file again? — pschueller, Mar 13 '15 at 22:21

pschueller · Accepted Answer · 2015-03-13T22:37:00.090

Your HTML is invalid, you need to declare a doctype, for example:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
</head>
<body>
    <div class="pure-menu">
      <span class="pure-menu-heading">Yahoo Sites</span>

      <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a>
        </li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a>
        </li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a>
        </li>
        <li class="pure-menu-heading">More Sites</li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a>
        </li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a>
        </li>
      </ul>
    </div>
</body>
</html>

See this page for more information on how to structure your HTML file.

Alright, worked. Awesome! Can you tell why the heights fail then? Why is the doctype related to this styling? — ijverig, Mar 13 '15 at 22:35
The doctype tells the browser which version of HTML you are using. If you leave it out entirely the browser will use quirksmode which can cause all kinds of problems with your code. For more info see http://stackoverflow.com/q/6076432/2126792 and http://en.wikipedia.org/wiki/Quirks_mode — pschueller, Mar 13 '15 at 22:45

score 0 · Answer 2 · edited Jul 03 '15 at 12:50

0

I was having the same issue with the usage of pure-menu-item. It has indeed a height of 100%. I overwrote that height by adding style="height:20pt" to the div where the menu was in. I used a horizontal menu btw.

edited Jul 03 '15 at 12:50

Rory McCrossan

331,213
40
305
339

answered Jul 03 '15 at 12:28

Jaco van der Molen

1

score 0 · Answer 3 · answered Dec 05 '20 at 19:06

0

I added in my custom app.css to override pure css

.pure-menu-item { height: inherit; }

answered Dec 05 '20 at 19:06

Adam Carnagey

11
1

purecss pure-menu-item doesn't work properly

3 Answers3