Question

Been trying to get a “pure css” dropdown
been trying for days to get a “simple” css drop down nav going can get the top level displayed and the second level hiding but can’t make the sub items display on hover?? any help much appreciated sample Isolated is here::
css and html below paste bin
http://www.webdevout.net/test?01t

Answer 1

Your problems are probably because you’ve constructed your html wrongly. The sub-menu (.level-two) should be nested within the .level-one li elements:

<div id="navtree">
<ul class="level-one">
<li><a href="/about/" title="about">about</a></li>
<li><a href="/contact/" title="contact">contact</a></li>
<li><a href="/feeds/latest/" title="subscribe">subscribe</a></li>
<li><a href="/Test1/" title="Test1page">Test1</a>
  <ul class="level-two">
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li>
  </ul>
</li>
<li><a href="/Test2/" title="Test2 page">Test2</a>
  <ul class="level-two">
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>
</ul></li>

</ul>
</div>

If you then use the following css:

.level-one {display: inline; position: relative; }

.level-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ }

.level-one:hover .level-two {display: block; }

I think that should be enough to get you started. Feel free to ask any questions in comments, or update your question.

Also, since I’m assuming you’re fairly new to this, I’d like to offer you the following references:

• For all things snazzy and wonderful with CSS menus: CSS Play, by Stu Nicholls.
• For an intro to some of the hows and whys: A List Apart.
• A brief introduction, from Eric Meyer.

There are dozens, if not hundreds, more to be found…