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

okay, so i know this is supposed to happen in css, but is there any way i can make it so that it doesnt?

my site it www.gamersinsaninty.com and in the css dropdown nav, when you rollover to create the dropdown, it pushes the next menu item out of the way. i want the dropdown to be the width it is now, so changing the width to the same as the top wont work. also, i want to keep the list form navigation. heres my source code for that bit.

HTML

<div id="nav">
	<ul id="home">
	  <li class="top"><a href="/index.php">Home</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>
	<ul id="roster">
	  <li class="top"><a href="/roster.php">Roster</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>
	<ul id="matches">
	  <li class="top"><a href="/matches.php">Matches</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>	
	<ul id="charter">
	  <li class="top"><a href="/constitution.php">Charter</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>
	<ul id="media">
	  <li class="top"><a href="/media.php">Media</a></li>
	  <li class="drop"><a href="/index.php">OMGWHATSGOINGTOHAPPENTOMEBECAUSEIMLONGGERTHANTHEBOX</a></li>
	</ul>
	<ul id="forums">
	  <li class="top"><a href="/phpBB3">Forums</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>
	<ul id="servers">
	  <li class="top"><a href="/servers.php">Servers</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>
	<ul id="contact">
	  <li class="top"><a href="/contact.php">Contact</a></li>
	  <li class="drop"><a href="/index.php">Test</a></li>
	</ul>
</div>

Code (markup):

CSS

#nav {
  position:absolute;
  left:360px;
  top:15px;
}
#nav ul {
  list-style-type:none;
  float:left;
  margin:0 1px 0 0;
  text-align:center;
}
#nav ul li a {
  color:#ead5d4;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:8pt;
  font-weight:bold;
}
#nav ul li a:hover {
  color:#fff;
}
#nav .top {
  width:68px;
}
#nav .drop {
  width:150px;
}
#nav ul .drop {
  display:none;
  background-color:#8d1e1e;
  border:1px #000 solid;
}
#nav ul:hover .drop {
  display:block;
}

Code (markup):

 

hmm

try

#nav ul .drop {
display:none;
background-color:#8d1e1e;
border:1px #000 solid;
position:absolute;
}

 

wow i feel so stupid, i thought i put that in there, but it still wasn't working, haha sorry. worked like a charm. +rep'd

 

another problem, when i add more than one list to the drop class. it only shows the last one. is there any way i can make it so all of them show, so i can have more than one drop down on my navigation? thanks (by the way, the source is updated on the site. under matches i have three li's test, test2 and test3, and only test3 shows up . thanks for the help

 

	<ul id="matches">
	  <li class="top"><a href="/matches.php">Matches</a>[b]</li>[/b]
	  <li class="drop"><a href="/index.php">Test</a></li>
	  <li class="drop"><a href="/index.php">Test2</a></li>

	  <li class="drop"><a href="/index.php">Test3</a></li>
	</ul>

Code (markup):

Normally with drop downs, we have a sub-list, whereas you are making each list item its own ul.

I think you've set the position for "drop" as being in exactly the same place, and test3 being the last thing listed, is the one who shows. I think test1 and test2 are right there, underneath test3.

Normally I'd set the whole menu as a single ul, and make each of the "main" li's being the parents of new sub lists, which then would show in order. Each single sublist item isnt' absolutely positioned, just the sublists in general. This lets them drop down with each item underneath the last.

<ul id="nav'>
  ...other list items...
  <li><a href="/matches.php">Matches</a>
    <ul class="drop">
      <li><a href="/index.php">Test</a></li>
      <li><a href="/index.php">Test2</a></li>
      <li><a href="/index.php">Test3</a></li>
    </ul>
  </li>
  <li><a href="/charter.php">Charter</a>...
etc

Code (markup):

Here, the tests are part of Matches as children, not siblings.

An example Suckerfish (doesn't work in IE6 cause I don't have the Javascript for it to :hover on li's)
http://stommepoes.nl/Menus/barebonessuckerfish.html
and barebones.css

 

okay, so would i just use position:relative to put it under the top. because your suckerfish just confused me. i have a lot less code than that, :S

 

In suckerfish, you have a normal horizontal list:

<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>

Code (markup):

But then add children to the li's (not the a's) and those are your submenus, your dropdowns:

<ul>
  <li><a href="#">Item1</a>
    <ul>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub4</a></li>
  </li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
  <li><a href="#">Item4</a></li>
  <li><a href="#">Item5</a></li>
</ul>

Code (markup):

The li's are usually floated since that's the easiest way to get them side-by-side... I suppose you could use display: inline-block instead, but traditionally they've been floated.

Normally the menu gets position: relative, the li's are just floated, and the subs are absolutley positioned. While their coordinates go from the nearest positioned parent, they are still each a child of one of the li's, so they all start underneath their parent li.

inside the absolutely positioned subs, the sub li's and sub a's just do their normal thing. Yoiu can float them if you are trying for that effect, or you could just stop them from inheriting the float they get from their parent li's. Whichever.

There's a full article on Suckerfish (but without the help for IE7 I have) here: http://www.htmldog.com/articles/suckerfish/dropdowns/

 

whys it called suckerfish?

and im pretty sure thats what i have, or my own way of doing it.

i may get rid of my nav div, and just have everything there, but i dont know how that would work out, aha

 

suckerfish is just the name of the script, easy to use, easy to modify, easy to install, ive done it in a couple sites

best thing to do with a situation like is start from scratch with something that will actually meet your needs, dont be stuck to that display.. ( to be honest, im not a fan anyhow )

 

Fat, bloated, slow, overcomplicates something simple, sends unneccessary CSS to all browsers unless you use a CC and separate stylesheets (/FAIL/)...

Why the hell is suckerfish so ****ing popular again? (Oh wait, if total CRAP like YUI, MooTools, Jquery and of course all the crap on Dynamic Drive is popular.....)

 

because it provides people that dont know much of coding ways to do get it done quickly? idiot.

and to: fat, bloated, slow... are you kidding me?

please define slow ... please
not everyone can be as perfect as you..




and dont have to use separate style sheets either

get it together




cheers

 

There's nothing slow about Suckerfish, nor bloated-- uness you're counting the Javascript, which I don't use and consider an option (I consider the HTML and the CSS as "Suckerfish"). 12 lines is not enough to call bloat unless it's replacing something CSS can do alone.

Homer: for some reason they decided to use Perciformes as their list items, so the menu got named Suckerfish. It's like the most basic drop-down menu you can get. It got popular I think because the CSS is extremely clear, and for those who cannot load .htc files onto their hosting server, there's a Javascript (the first version was seriously large and bloated but the rewrite is 12 lines of Javascript-- oooooh, so much bloat) to help our crippled and retarded friend IE6 to act in a Standards Compliant way.

Mikey, he's referring to the need to add a class in the CSS for every hover. While the other browsers don't use the Javascript, and thus don't use the extra class, they do all have to load it.

Although the things I add to my stylesheets in order to keep everything on a single sheet add a lot more characters than an extra class (which, if you're a real nazi about it, you can make the class a single letter like "h" for hover... ALA/HTMLdog use "sfhover" to make it clear to newbies.

I doubt that's why. Maybe because everyone at some point in their newbieness came across this (I did, it was my first menu):

<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]><a href="../menu/index.html">DEMOS<table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
    <!--[if lte IE 6]><a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;<table><tr><td><![endif]-->
		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
...etc

Code (markup):

and THIS for CSS:

.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

Code (markup):

I remember tearing hair out trying to change that to my liking. Suckerfish showed clean, simply CSS in a fairly logical order.

That it uses Javascript in the <head> to make IE hover is a godsend to those who cannot access their hosting servers.

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Code (markup):

That's 100% of the code. The old Suckerfish JS needed new sections for every level deeper you went. Big whoop. It makes IE6 hover on your menu. Peterned's .htc file lets IE6 hover over anything, which is the advantage, but you'll need to be able to set such a thing on your server. I personally don't have it on mine, just the work server, so my demos on stommepoes either just don't hover (like the one I linked to earlier) or they have Suckerfish js as a stopgap. Whatever.

 

In other words a sleazeball shortcut that causes more problems and time wasted whenever anything actually goes wrong, and caused more problems than it has ever solved.

Extra classes in the CSS, directly loading a javascript in the markup, sending all that to all browsers, what would you call it?

Though it's a good idea so you aren't sending information to browsers that don't NEED it.

Just write a flat CSS menu that works in all modern browsers, and throw a behavior file at IE6. It's SIMPLER, it's LESS CODE, and it's faster for 70% of users since you are only sending them 46 bytes of code they don't need instead of several K. (at the cost of sending IE6/earlier users 4k on firstload)

Suckerfish is a stupid ugly solution to a problem that shouldn't even be a problem, and I've seen it break or not respond as expected on too many people's sites.

Though it could be worse, it could be Stu Nichols Stu-pid nested table CC solution. (great example of what is possible, but code that should never be deployed in a production website)

Suckerfish is bad code. Simple as that.

Oh, Stomme Poes - I think you got stuff confused there. Your HTML is for Stu's Stu-pid version - which doesn't need or use the suckerfish javascript. (though it does fatten up every page on a site with all that conditional rubbish in the markup)

HUH?!? Oh, are you on some crap server that's serving .htc as the wrong mime-type or something? (not that it should matter, IE doesn't give a rat's **** about mime-type)

 

Many IIS server configs won't accept .xxx files at all. (Thanks MSFT admins) The solution is to give the file an innocuous name for uploading. Then, when in place, rename it to .htc or whatever.

cheers,

gary

 

No, you got confused. My point was, the Stu-menu was what many people started with, realised it was almost impossible to edit, and saw the simplicity of Suckerfish. I was very much posting a Stu-menu.

I have full control over MY server. I know other people using hosting where they cannot add .htc files for whatever reason. When this happens, they need some other Javascript file. Make it external if you want.

IE may not care about MIMEtypes but after Service Pack 2 lots of people couldn't use Peterned's .htc because of "security" and a MIMEtype was needed. It was a Windows thing, not an IE thing.

 

well im not using any javasctipy, .htc anything, and my menu works on ff 3, google chrome, and ie 7. the only thing in ie 7 the positioning is a little off. but meh, its fine with me.

if you wanna take a look at my code, ask me for it, or view the source here www.gamersinsaninty.com

 

Homer: the only reason for Javascript is for IE6 to hover properly, and if you're not supporting IE6, then you don't need ANY Js.

 

meh, if people come on in ie6, than i dont think they would care about a non dropdown menu they must not be very technology wise, or they just like ie6 better. If the latter, then maybe i should add some js :S haha not that know how to write it.

 

Which is the beauty of peterned's csshover2.htc - you have the menu working in all 'modern' browsers. To make it work in IE6 just add this to your css.

* html body { behavior:url(csshover2.htc); }

copy the .htc file to the same directory as the css
http://www.xs4all.nl/~peterned/htc/csshover2.htc

from
http://www.xs4all.nl/~peterned/csshover.html

and that SHOULD be all you need. (though positioning might be off unless you trip haslayout)

All these other techniques involve writing code for IE, sometimes in the markup (stu's), other times adding classes to the CSS (suckerfish) while this involves writing it normally and adding a whopping one line to get legacy support.

 

okay, ill look into that .

also, with a html 4.01 strict doctype, my menu trips errors saying that <ul> should not come before the closing </ul> in the top level links.

btw, if you validate the page yourself, you will get like 70 errors, most of them are from my flash music player and server info boxes. i knew they're not semantically correct, but the owner of the site wants them so i just decided to leave 'em, the rest of the errors are just from that "ul cant come before another </ul>