I've been working on displaying some drop-down menus using the suckerfish CSS method. For some reason the nested UL keeps disappearing when you try to go down the list. If you are very careful and hover over the bottom border of the main UL, you can see it highlight the first Item in the list, but going any further down will make it disappear.

Can someone please take a quick look and see what I'm missing?

Here's the CSS:

/* Drop down menu */
#mainlevel-toolbar {
   list-style: none;
   width: 100%;
   padding: 0 2%;
}

#mainlevel-toolbar li {
   float: left;
   position: relative;
   width: 16%;
}

#mainlevel-toolbar li:hover {
   background: url(../images/menu-bg-hover.gif) repeat-x top left;   
}

#mainlevel-toolbar li a {
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   height: 30px;
   line-height: 30px;
   width: 100%;
   display: block;
}

#mainlevel-toolbar ul {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: 180px;
   background-color: #505050;
}

#mainlevel-toolbar li > ul {
   top: auto;
   left: auto;
}

#mainlevel-toolbar li:hover ul {
   display: block;
}

#mainlevel-toolbar ul li {
   width: 100%;
   line-height: .6em;
}

#mainlevel-toolbar ul li a {
   text-align: left;
   width: 90%;
   padding: 0 5%;
}

#mainlevel-toolbar ul li:hover a {
   background-color: #AAAAAA;
   color: #000000;
}

Here's the HTML:

		   <div id="toolbar">
		     <ul id="mainlevel-toolbar">
			    <li><a href="#">Home</a></li>
				<li>
					<a href="#">Programs</a>
					<ul>
					   <li><a href="#">Item 1</a></li>
					   <li><a href="#">Item 2</a></li>
					   <li><a href="#">Item 3</a></li>
					   <li><a href="#">Item 4</a></li>
					</ul>
				</li>
				<li><a href="#">Schedule</a></li>
				<li><a href="#">News</a></li>
				<li><a href="#">Information</a></li>
				<li><a href="#">About Us</a></li>
			</ul>
		   </div>

It works in FF but not in IE6 for me.

I haven't got the csshover.htc file in there yet, that's why it isn't working in IE.

I'm trying it in FF 2.0 and it is disappearing as soon as I try and go down the list. Can you go all the way down?

Originally Posted by zincoxide

I'm trying it in FF 2.0 and it is disappearing as soon as I try and go down the list. Can you go all the way down?

Yes - But I used just the bare markup you provided without the use of doctype, html, head or body html tags

I'm using XHTML Strict.

Can you try that for me and see if it works for you?

I'm not seeing the problem at all using XHTML 1.0 Strict. I can scroll down the sub-menu w/o it disappearing.