CSS drop down menu

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

The second level <ul> level must be children, you have this:

<li><a href="/Test2/" title="Test2 page">Test2</a></li>
<ul class="level-two">
 <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>    
</ul>

Change to this:

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

Answer 2

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

Answer 3

Here is the css I'm sort of happy with that implements three level dropdown So far only tested in FF:

/* Inserted by Tom Brander for nested nav Allows for Three levels.. pattern can be extended if you want */
ul.level-one{
  margin-left:-10px; /* lines up 1st item with search box*/
}
ul.level-one li{
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
  float: left;
  position: relative;
  line-height: 1.3em;
  }
ul.level-one li:hover {
  background:#999ca0;
  }
.level-two {
  display: none;
  position :absolute;
  Left:0;
  top: 1em;
  }
.level-three {
  display: none;
  position :absolute;
  top: 0em;
  }
.level-one li:hover .level-two {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  }
.level-two li:hover .level-three {
  display: block;
  background: #999ca0;
  width: 100px;
  padding-left: 10px;
  margin-left: 92px;  /* this moves the 3rd level over to the right but not too far, needs enough overlap so that you can move the mouse wthout the third level dissapearing */
  }
.level-three li:hover {display:block;}