Drop down menu not working

HTML & CSS
1

I’m having problem getting my menu drop downs to show. Basically it doesn’t do anything and i can’t see what the problem is.

The sprite positioning is working perfectly but no drop downs.

Any ideas what’s going wrong?

<html>
<head>
<style>

	
/*SON OF SUCKER FISH DROP DOWNS MODIFIED*/	
#menu, #menu ul {
	padding:0;
	margin:0;
	clear:both;
	float:left;
	width:inherit;
	}
	
#menu ul.drop {
	background:#000;
	padding:5px;
	width:inherit;
	clear:both;
	float:left;
	margin-top:32px;
	}

#menu ul.drop li {
    width:inherit;
	clear:both;
	}
	
#menu ul.drop a {
	
	color:#fff;
	font-size:10px;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	}
	
#menu a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:100px;
}

#menu li {
	float: left;
	/*width: 10em;*/
}

#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

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

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
}
/*END SUCKERFISH*/

/*SPRITE BACKGROUP POSITIONING*/	
/* Everything CSS Sprite Menu */
	ul#menu{margin:0; padding:0; list-style:none; clear:both;}
	#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left;}
	#menu li a{background:url('menu.png') no-repeat; width:100%; height:100%; display:block;}
			
	/* Home Button */
	#menu li.home{width:95px; height:45px;}
	#menu li.home a{background-position:0px 0px}
	#menu li.home a:hover{background-position:0px -45px;}
	#menu li.home a.selected{background-position:-5px -90px;}

	/* About Button */
	#menu li.about{width:83px; height:45px;}
	#menu li.about a{background-position:-96px 0px;}
	#menu li.about a:hover{background-position:-96px -90px;}
	#menu li.about a.selected{background-position:-125px -145px;}

	/* Contact Button */
	#menu li.news{width:76px; height: 45px;}
	#menu li.news a{background-position:-180px 0px;}
	#menu li.news a:hover{background-position:-180px -135px;}
	#menu li.news a.selected{background-position:-250px -145px;}
	/* Home Button */
	#menu li.blogs{width:89px; height:45px;}
	#menu li.blogs a{background-position:-256px 0px;}
	#menu li.blogs a:hover{background-position:-256px -180px;}
	#menu li.blogs a.selected{background-position:-5px -90px;}

	/* About Button */
	#menu li.fundraising{width:145px; height:45px;}
	#menu li.fundraising a{background-position:-345px 0px;}
	#menu li.fundraising a:hover{background-position:-345px -225px;}
	#menu li.fundraising a.selected{background-position:-125px -145px;}

	/* Contact Button */
	#menu li.gallery{width:103px; height: 45px;}
	#menu li.gallery a{background-position:-490px 0px;}
	#menu li.gallery a:hover{background-position:-490px -270px;}
	#menu li.gallery a.selected{background-position:-250px -145px;}
	/* Home Button */
	#menu li.forum{width:89px; height:45px;}
	#menu li.forum a{background-position:-593px 0px}
	#menu li.forum a:hover{background-position:-593px -315px;}
	#menu li.forum a.selected{background-position:-5px -90px;}

	/* About Button */
	#menu li.contact{width:104px; height:45px;}
	#menu li.contact a{background-position:-682px 0px;}
	#menu li.contact a:hover{background-position:-682px -360px;}
	#menu li.contact a.selected{background-position:-125px -145px;}

	/* Contact Button */
	#menu li.shop{width:100px; height: 45px;}
	#menu li.shop a{background-position:-786px 0px;}
	#menu li.shop a:hover{background-position:-786px -405px;}
	#menu li.shop a.selected{background-position:-250px -145px;}/*END NAVIGATION*/

</style>
</head>
<body>
<div id="nav">
	<ul id="menu">
		<li class="home"><a href="<?=URL;?>">Home</a></li>
		<li class="about"><a href="<?=URL;?>about">About</a></li>
		<li class="news"><a href="<?=URL;?>news">News</a></li>
		<li class="blogs"><a href="<?=URL;?>blogs">Blogs</a></li>
		<li class="fundraising"><a href="<?=URL;?>fundraising">Fundraising</a>
			<ul class="drops">
				<li><a href="inside.html">Our Mission</a></li>
				<li><a href="inside.html">Our Difference</a></li>
				<li><a href="inside.html">Leadership</a></li>
				<li><a href="inside.html">Advisory Board</a></li>
				<li><a href="inside.html">Partners</a></li>
				<li><a href="inside.html">Press</a></li>
			</ul>
		</li>
		<li class="gallery"><a href="<?=URL;?>gallery">Gallery</a></li>
		<li class="forum"><a href="<?=URL;?>forum">Forum</a>
			<ul class="drops">
				<li><a href="inside.html">Our Mission</a></li>
				<li><a href="inside.html">Our Difference</a></li>
				<li><a href="inside.html">Leadership</a></li>
				<li><a href="inside.html">Advisory Board</a></li>
				<li><a href="inside.html">Partners</a></li>
				<li><a href="inside.html">Press</a></li>
			</ul>
		</li>
		<li class="contact"><a href="<?=URL;?>contact">Contact</a></li>
		<li class="shop"><a href="<?=URL;?>shop">Shop</a></li>
	</ul>
</div>
</body>
</html>
2

Hi,

You have hidden the text here with text-indent:


#menu li{overflow:hidden; [B]text-indent:-9999px;[/B] display:inline; float:left;}

I assume you did that for the top level which seem to be images so re-instate it on nested lists.


#menu li li{text-indent:0}
3

Thanks Paul

That got the drop down to appear but now it’s displaying the text in the link on the top level. I’ve got text in the sprite so want to hide the text in the link. How do i do that?

Also I don’t see any styling for the drop downs so have i missed anything there? I don’t really care about the colour of the background etc as long as it’s below the main menu

4

Hi,

That got the drop down to appear but now it’s displaying the text in the link on the top level

It shouldn’t do because the text in the first level is hidden with the first rule.


#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left;}/* first level*/
#menu li li{text-indent:0}/* second level */

Also I don’t see any styling for the drop downs so have i missed anything there?

You have used a class of .drop in the css but the html says ‘drops’ :slight_smile:

Remember also to move the sub nav code below the css for the top level and give it the same or more weight to over-ride the top level styles. If you weren’t supporting IE6 you could use the child selector to make styles only apply to the top level and avoid having to cancel them out in the nested menus.

Do you have a link to the page or at least upload the menu png so I can reference it in the code above as at the moment the whole page is white background on white text which makes it hard to debug. :slight_smile:

5

Hi Paul

I’ve uploaded the menu image as my site hasn’t been published yet.

Many thanks

6

Hi,

Ok here’s a start for you. :slight_smile:

Just view source as the code is in the head but you will need to change the image name back to what you had it as I renamed it for the demo. You should be able to take it from hree and style it as you want.

It should work back to IE7 but won’t work in IE6 unless you add the suckerfish js and tweak the styles a little).

7

Thanks Paul…you’re a legend