SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down menu not working

    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 Code:
    <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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You have hidden the text here with text-indent:
    Code:
    #menu li{overflow:hidden; text-indent:-9999px; 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.

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

  3. #3
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.
    Code:
    #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'

    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.

  5. #5
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

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

    Many thanks
    Attached Images Attached Images

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Ok here's a start for you.

    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. #7
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.....you're a legend


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •