li's pushing other li's out of the way

The valiidity issue is here:

	<ul id="home">
	  <li class="top"><a href="/index.php">Home</a></li>
	    <ul class="drop">
	    <li><a href="/index.php">Test</a></li>
	    <li><a href="/index.php">Test2</a></li>
	    </ul>
	</ul>

Code (markup):

it should be:

<ul id="home">
  <li class="top"><a href="/index.php">Home</a>
    <ul class="drop"> <!-- ul.drop is a child of li.top -->
      <li><a href="/index.php">Test</a></li>
      <li><a href="/index.php">Test2</a></li>
    </ul> <!-- close .drop -->
  </li> <!-- close .top -->
</ul> <!-- close #home -->

Code (markup):

Notice that the nested ul is now the child of the li. A ul may only have one or more li child elements. The ul may not have a ul child.

cheers,

gary

 

This is the reason our work server uses Peterned's .htc whatever:hover instead of Suckerfish JS (though the HTML and CSS for menus ARE Suckerfish)-- PLUS added benefit of whatever:hover making IE6 hover on ANYTHING on the whole page you add :hover to, not just the menu.

To use Peterned's .htc file with Suckerfish code, a trigger is needed for IE. I add this:
li:hover {
position: relative;
}
but I don't have pos: rel on normal li's... they're just floated. That's it.

 

Uhm, one 'problem', one correction... Comment placement could trip both the double render AND dissapearing content bugs, and all those classes shouldn't even be necessary...

and given the original seems to be using multiple UL's for what should be a single list...

<ul id="mainMenu">
	<li>
		<a href="/index.php">Home</a>
		<ul>
			<li><a href="/index.php">Test</a></li>
			<li><a href="/index.php">Test2</a></li>
		</ul>
	</li><li>
		<a href="/roster.php">Roster</a></li>
		<ul>
			<li><a href="/index.php">Test</a></li>
			<li><a href="/index.php">Test2</a></li>
		</ul>
	</li><li>
		<a href="/matches.php">Matches</a></li>
		<ul class="drop">
			<li><a href="/index.php">Test</a></li>
			<li><a href="/index.php">Test2</a></li>
		</ul>
	</li> 
<!-- #mainMenu --></ul>

Code (markup):

With any other menu items continuing on INSIDE the UL. The original code there is opening and closing all those UL for no good reason, and throwing classes and ID's at them, again for no good reason. Doing it this way also means you can probably get rid of that silly 'nav' div around the menu too.

Oh, and would you kindly smack the owner with a wet trout for having auto-playing music on a website.

 

I thought all that was there just to make it clear that he's not to close the li until after the sub ul is closed... and the classes kept there so Homer can follow who's doing what.

But yeah the original problem was that each menu item was actually its own separate menu. Which I think by know he knows is silly (I hope).

 

True. I thought their purpose was obvious; apparently false. :shrug:

cheers,

gary

 

well i was just playing around with the uls and i got it to work, so i didnt change it, also i know the nav div shouldnt be there,

and the reason the autplaying music is there, is because people on the forums suggested and 97% said yes lets do it. :S

yay deathshadow, i did what you told me to, now my css totally ignores it. doesnt #nav mean any thing that has the id of nav?, i even tried defining ul#nav and nothing.

EDIT: okay got it to take my css, but not working so hot, now every list on my site has a float:left, even though i only have

#nav li {
  float:left;
}

Code (markup):