Help with CSS Menu

HTML & CSS
1

Hi all,

I’ve built a CSS Menu using “Son of Suckerfish” as a guide…

It works perfectly… Now I need some help making a few improvements.

The code so far is as follows:

<style>
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li {
	float: left;
	width: 10em;
}

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	background-color:#900;
}

#nav li ul a {
	color:#FFF;
	text-decoration:none;
}

#nav li ul a:hover {
	color:#FFF;
	text-decoration:underline;
	font-weight:bold;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}


</style>



<script>
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);
</script>



</head>

<body>

<ul id="nav">
	<li><a href="#"><img src="wp-content/themes/thepink/images/home.png" height="30" width="80"/></a>
		<ul>
			<li><a href="#">Login/Logout</a></li>
			<li><a href="#">Register</a></li>
			<li><a href="#">Membership</a></li>
			<li><a href="#">About Us</a></li>
		</ul>
	</li>

	<li><a href="#"><img src="wp-content/themes/thepink/images/articles.png" height="30" width="150"/></a>
		<ul>
			<li><a href="#">Browse Categories</a></li>
			<li><a href="#">Newsletter Subscription</a></li>
			<li><a href="#">Submit An Article</a></li>
		</ul>
	</li>
    
    <li><a href="#"><img src="wp-content/themes/thepink/images/community.png" height="30" width="150"/></a>
		<ul>
			<li><a href="#">Discussion Forums</a></li>
			<li><a href="#">Live Chat</a></li>
			<li><a href="#">About Our Community</a></li>
		</ul>
	</li>
    
    <li><a href="#"><img src="wp-content/themes/thepink/images/videos.png" height="30" width="90"/></a>
		<ul>
			<li><a href="#">Browse Videos</a></li>
			<li><a href="#">About ParentChannelTV</a></li>
		</ul>
	</li>
    
    <li><a href="#"><img src="wp-content/themes/thepink/images/shop.png" height="30" width="80"/></a>
		<ul>
			<li><a href="#">Browse The Shop</a></li>
			<li><a href="#">Sell Your Stuff</a></li>
			<li><a href="#">About The 1-Stop</a></li>
		</ul>
	</li>
    
    <li><a href="#"><img src="wp-content/themes/thepink/images/astrology.png" height="30" width="150"/></a>
		<ul>
			<li><a href="#">Daily Horoscopes</a></li>
			<li><a href="#">Weekly Horoscopes</a></li>
			<li><a href="#">Monthly Horoscopes</a></li>
			<li><a href="#">Personal Reports</a></li>
            <li><a href="#">About The Astrologer</a></li>
		</ul>
	</li>
    
    <li><a href="#"><img src="wp-content/themes/thepink/images/charts_tools.png" height="30" width="150"/></a>
		<ul>
			<li><a href="#">Baby Name Finder</a></li>
			<li><a href="#">Due Date Calculator</a></li>
			<li><a href="#">Oculation Predictor</a></li>
			<li><a href="#">Weight Charts</a></li>
		</ul>
	</li>
    
    <li><a href="#"><img src="wp-content/themes/thepink/images/fun_games.png" height="30" width="150"/></a>
		<ul>
			<li><a href="#">Games</a></li>
			<li><a href="#">Newsletter</a></li>
			<li><a href="#">Social Networking</a></li>
		</ul>
	</li>

</ul>

</body>
</html>

Basically, I just need to fix the spacing… At the moment it looks like this:

But I need all the “tabs” to be next to each other…

I don’t understand why the “Home” submenu is so wide when none of the wording in that menu is remotely as long. But in either case… I need the top line (the tabs) to be next to eachother despite the width of their subsequent menus.

Any help would be appreciated.

Thanks.

2

I think what you are seeing is small images in 10em-wide li’s.

This should also be the reason for the width of the submenu…


#nav li ul {
    position: absolute;
    [b]width: 10em;[/b]

It’s not based on the width of your text, but the width you set.

Now the problem is this:

You can leave off the width: 10em from the top-level li’s (the “for Opera” that Suckerfish is talking about is a jitter bug on :hover and Opera does not do that so long as you state a width… well it turns out that “width: auto” counts!)
and then the width of the anchors will be 100% of the li’s and the li’s width will be based on the (inline) content of the anchors… in other words, each “tab” will be as wide as the text inside.

However, this may be a problem for your submenus. If you turned your ul li ul to “width: 100%” then in browsers (except IE6 cause it’s a tard) will be as wide as their positioned parent… the width: auto li’s on top.

What do you want if any particular top-level menu item is not as wide as the text in its submenu? You may need to add a class to those sub-ul’s so you can set a wider width.

For IE6, I forget what I have done, but you don’t want width: 100% on an absolutely-positioned element in IE6… it thinks that 100% is like the width of the page or something.