Drop down menu help

shakmbakm · April 20, 2012, 3:16am

I’m making a hover drop down menu. Where you hover the mouse over an option and a new menu drops down. The menu is working but for each option the same image appears. I can provide a link if needed. Thank you.
this is the html

<body>
<div id="wrapup">
<div class="container">
<div id="header">
<ul id="mainMenu">
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="about.html">About</a></li>
<li id="games"><a href="games.html">Games</a>
        <ul>
        <li><a href="music_block_attack.html">music block attack</a></li>
        <li><a href="cuddlybears.html">cuddly bears</a></li>
        <li><a href="snowmanwars.html">snowman wars</a></li>
    </ul>
</li>

<li id="services"><a href="services.html">Services</a></li>
<li id="contact"><a href="contact.html">Contact</a></li>
<br class="clear" />
</ul>
</div>

<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container"><a href="snowmanwars.html"><img src="images/games/snowwars.png" alt="Snowman Wars" height="500" width="800" border="0" /></a> <a href="music_block_attack.html"><img src="images/games/musicblock.png" alt="Music Block Attack" height="500" width="800" border="0" /></a> <a href="cuddlybears.html"><img src="images/games/cuddlykick.png" alt="Cuddly Bears" height="500" width="800" border="0" /></a> <img src="images/games/aclimb2.png" alt="Arrow Climber" height="500" width="800" border="0" /> <img src="images/games/knights2.png" alt="Knights" height="500" width="800" border="0" /></div>
<a href="#" class="prev"><img src="images/arrow-prev.png" alt="Arrow Prev" height="43" width="24" border="0" /></a> <a href="#" class="next"><img src="images/arrow-next.png" alt="Arrow Next" height="43" width="24" border="0" /></a></div>
</div>
</div>
</div>
<div id="twitter-ticker">
<div id="top-bar">
<h2 class="tut">Latest Tweets From Super Fun Games</h2>
</div>
<div id="tweet-container"><img id="loading" src="images/loading.html" alt="Loading.." height="11" width="16" /></div>
<div id="scroll"></div>
</div>
<div id="footer"><ui id="foot"> <center><a href="http://twitter.com/#!/SuperFunGamesAZ" target="_blank" border="0"> <img src="images/twitterlogo2.png" border="0" /></a> <a href="http://www.facebook.com/pages/Super-Fun-Games/169546349765028" target="_blank" border="0"><img src="images/facebook2.png" border="0" /></a><br /><br /> (c)2011 Super Fun Productions. All rights reserved.</center> </ui></div>
</div>
</body>

</html>

Here is the CSS

    @charset "UTF-8";

    body {
        margin: 0; padding: 0;
        font: 10px normal Arial, Helvetica, sans-serif;
        background: #FFFFFF url(../images/leaves.png) no-repeat center left;
            width: 100%;
            display: table;
    }

    #wrapup {
        margin: 0 auto;
        width:1100px;
    }

    .container {
        width: 1100px;
        padding-top: 25px;
            padding-left: 5px;
        margin: 30 auto;
        position: relative;
    }

    #header {
        background: url(../images/header2.png) no-repeat center top;
        height: 250px;
        padding-top: 10px;
        padding-left: 0;
    }

    #mainMenu{
        width:1100px;  /*---Give our UL a width ---*/
        list-style:none;  /*--- Makes the bullets go away ---*/
        margin:0;  /*--- Take out any default margin on the UL tag ---*/
        padding:0;  /*--- Take out any default padding on the UL tag ---*/
    }

    #mainMenu li{
        float:left;  /*--- Make the list go horizontal ---*/
        margin-left:30px;  /*--- Give spacing in between list items ---*/
    }

    #mainMenu li a{
        display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
        width:185px;  /*--- Height of buttons ---*/
        height:78px;  /*--- Width of buttons ---*/
        text-indent: -9999px; /*--- Push the text off screen to hide text---*/
        overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/

    }
    #mainMenu ul {
        position: absolute;
        display: none;
        z-index: 999;
    }
    #mainMenu ul li a {
        width: 95px;
    }

    #mainMenu li:hover ul {
        display: block;
    }

    /*
    The following rules place the "normal"
    state image as the background for our anchor tags
    */

    #mainMenu li#home a{

    }

    #mainMenu li#about a{
        background: url(../images/a1.png) no-repeat;
    }

    #mainMenu li#games a{
        background: url(../images/g1.png) no-repeat;
    }

    #mainMenu li#games li a{
        background: url(../images/mbagames.jpg) no-repeat;
        background: url(../images/cb.jpg) no-repeat;
        background: url(../images/snoman.jpg) no-repeat;

    }

    #mainMenu li#services a{
        background: url(../images/s1.png) no-repeat;
    }

    #mainMenu li#contact a{
        background: url(../images/c1.png) no-repeat;
    }

    /*
    The following rules place the "over"
    state image as the background for our anchor tags
    when they are hovered over by the mouse
    */

    #mainMenu li#home a:hover{

    }

    #mainMenu li#about a:hover{
        background: url(../images/a2.png) no-repeat;
    }

    #mainMenu li#games a:hover{
        background: url(../images/g2.png) no-repeat;
    }

    #mainMenu li#services a:hover{
        background: url(../images/s2.png) no-repeat;
    }

    #mainMenu li#contact a:hover{
        background: url(../images/c2.png) no-repeat;
    }

    .clear{
        clear:both;  /*--- Clears the float of the list items to restore normal document flow ---*/
    }

    /*
    The following rules place the "down"
    state image as the background for our anchor tags
    when they anchor tag has the class of current
    */

    #mainMenu li#home a.current{
        cursor:default;  /*--- Show pointer instead of hand cursor for the current page ---*/
    }

    #mainMenu li#about a.current{
        background: url(../images/a2.png) no-repeat;
        cursor:default;
    }

    #mainMenu li#games a.current{
        background: url(../images/g2.png) no-repeat;
        cursor:default;
    }

    #mainMenu li#services a.current{
        background: url(../images/s2.png) no-repeat;
        cursor:default;
    }

    #mainMenu li#contact a.current{
        background: url(../images/c2.png) no-repeat;
        cursor:default;
    }

    #games li#mba a {
        background: url(../images/mbagames.jpg) no-repeat;
    }
    #games li#cuddlybears a {
        background: url(../images/cb.jpg) no-repeat;
    }
    #games li#snowmanwars a {
        background: url(../images/snoman.jpg) no-repeat;
    }

RyanReese · April 20, 2012, 3:20am

Hello shakmbakm, welcome to Sitepoint :).

Yes just provide us the link. It will make testing easier since we have access to all the images :). I’m not seeing anything right off the bat that would cause, this, but I only briefly skimmed over your code. One thing that struck my eye was this.

#mainMenu li#games li a{
        background: url(../images/mbagames.jpg) no-repeat;
        background: url(../images/cb.jpg) no-repeat;
        background: url(../images/snoman.jpg) no-repeat;

    }

You’re only rewriting what image is being placed on it. Right now, the only image that will show up for htat element is the snoman.jpg. It overwrites the cb.jpg and mbagames.jpg. If you want all of them on the elmeent, you need to use CSS3 multiple backgrounds (not supported in all browsers)

shakmbakm · April 20, 2012, 3:26am

Thanks for the help. the link is http://superfunproductions.com and it is the games icon

RyanReese · April 20, 2012, 3:37am

I’ll say this. Besides the menu not even dropping down for me (is it for you?), there are a few flaws with your dropdown

You hide/show it via display:none. That’s bad. You should basically be hiding/showing via a huge negative left margin, and on hover, make that margin 0.
You don’t set coordinates for the dropdown menu <ul>. It needs top:100%; and left:0;
The <li>'s need position:relative to have a stacking context for the dropdown.
You need to unset what you set on the <li>'s, for the dropdown <li>'s. Aka do #mainMenu li li{float:none;position:static;}

The games dropdown is showing the same image for all because on "#mainMenu li#games a ", you set a background image.

This applies to all the anchors. Including those within the dropdown (<ul>)'s anchors. You need to reset the background to nothing.

Let us know if you need help with the dropdown. I’m a bit sleep deprived so I might just be going crazy. Perhaps I’ll go to bed now. Goodnight :). I’ll be back in the morning to check up on you.

shakmbakm · April 20, 2012, 4:10am

yeah it was showing up for me but from what you said that makes sense. I must have done the show hide wrong, the list is showing itself before the hover. this is what the code looks like now.

@charset “UTF-8”;


body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
	background: #FFFFFF url(../images/leaves.png) no-repeat center left;
        width: 100%;
        display: table;
}

#wrapup {
    margin: 0 auto;
    width:1100px;
}

.container {
	width: 1100px;
	padding-top: 25px;
        padding-left: 5px;
	margin: 30 auto;
	position: relative;
}

#header {
	background: url(../images/header2.png) no-repeat center top;
	height: 250px;
	padding-top: 10px;
	padding-left: 0;
}
		
#mainMenu{
	width:1100px;  /*---Give our UL a width ---*/
	list-style:none;  /*--- Makes the bullets go away ---*/
	margin:0;  /*--- Take out any default margin on the UL tag ---*/
	padding:0;  /*--- Take out any default padding on the UL tag ---*/
}

#mainMenu li{
	position:relative;
	float:left;  /*--- Make the list go horizontal ---*/
	margin-left:30px;  /*--- Give spacing in between list items ---*/
}

#mainMenu li li {
	float:none;
	position:static;
}

#mainMenu li a{
	display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
	width:185px;  /*--- Height of buttons ---*/
	height:78px;  /*--- Width of buttons ---*/
	text-indent: -9999px; /*--- Push the text off screen to hide text---*/
	overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/
	
}
#mainMenu ul {
	display: -9999,left;
	top:100%;
	left:0;

}
#mainMenu ul li a {
	width: 95px;
}

#mainMenu li:hover ul {
	display: 0;
}

RyanReese · April 20, 2012, 12:19pm

Well in your stylesheet, the dropdown is this

#mainMenu ul {
	display: -9999,left;
	top:100%;
	left:0;

}

That should read this

#mainMenu ul {
margin-left: -999em;
top: 100%;
left: 0;
position: absolute;
}

You must have been tired or something when you wrote that other stuff :).
And again with the showing part of the code. You have this

#mainMenu li:hover ul {
	display: 0;
}

Display:0 doesn’t exist. Make it this

#mainMenu li:hover ul {
	margin:0
}

shakmbakm · April 20, 2012, 8:30pm

Thanks for clearing that up. I was tired when doing that other stuff

RyanReese · April 21, 2012, 1:54am

So is everything answered? Did it all work?

shakmbakm · April 21, 2012, 5:12am

I just uploaded it and it doesn’t look like anything changed. It is still visible before hover. heres what it looks like now

#mainMenu{
	width:1100px;  /*---Give our UL a width ---*/
	list-style:none;  /*--- Makes the bullets go away ---*/
	margin:0;  /*--- Take out any default margin on the UL tag ---*/
	padding:0;  /*--- Take out any default padding on the UL tag ---*/
}

#mainMenu li{
	position:relative;
	float:left;  /*--- Make the list go horizontal ---*/
	margin-left:30px;  /*--- Give spacing in between list items ---*/
}

#mainMenu li li {
	float:none;
	position:static;
}

#mainMenu li a{
	display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
	width:185px;  /*--- Height of buttons ---*/
	height:78px;  /*--- Width of buttons ---*/
	text-indent: -9999px; /*--- Push the text off screen to hide text---*/
	overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/
	
}
#mainMenu ul {
	display: -9999em;
	top: 100%;
	left: 0;
	position: absolute;

}
#mainMenu ul li a {
	width: 95px;
}

#mainMenu li:hover ul {
	margin: 0;
}

one more thing, you say i need to reset the background to nothing. can you clarify that a little bit?

RyanReese · April 21, 2012, 3:15pm

Still tired?

#mainMenu ul {
	display: -9999em;
	top: 100%;
	left: 0;
	position: absolute;

}

Needs to be margin-left…:).

shakmbakm · April 24, 2012, 2:37am

How do I reset the image to nothing so it doesn’t show the same image every time?

RyanReese · April 24, 2012, 3:44am

I answered this in post 4 :).

If you are asking for code, it would be something like this

#mainMenu li#games ul li a{/* different background*/}

shakmbakm · April 24, 2012, 4:03am

I understand that the image needs to be “reset”, but I am not clear now how to execute it, will it have to be done after each different image?

RyanReese · April 24, 2012, 4:09am

You’ll need to specify each anchor specifically. For example, give the first anchor in the dropdown a class of…“asdf” (whatever it depicts)…and then use something like’

#minMenu li#games ul li a.asdf{}

shakmbakm · April 24, 2012, 4:43am

I must be putting it in the wrong place or something because none of the other images are showing up still. is there a certain place i need to put it.
this is what it looks like now.


#header {
	background: url(../images/header2.png) no-repeat center top;
	height: 250px;
	padding-top: 10px;
	padding-left: 0;
}
		
#mainMenu{
	width:1100px;  /*---Give our UL a width ---*/
	list-style:none;  /*--- Makes the bullets go away ---*/
	margin:0;  /*--- Take out any default margin on the UL tag ---*/
	padding:0;  /*--- Take out any default padding on the UL tag ---*/
}

#mainMenu li{
	position:relative;
	float:left;  /*--- Make the list go horizontal ---*/
	margin-left:30px;  /*--- Give spacing in between list items ---*/
}

#mainMenu li li {
	float:none;
	position:static;
}

#mainMenu li a{
	display:block;  /*--- Make the entire button are clickable rather than the text alone ---*/
	width:185px;  /*--- Height of buttons ---*/
	height:78px;  /*--- Width of buttons ---*/
	text-indent: -9999px; /*--- Push the text off screen to hide text---*/
	overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/
	
}
	
#mainMenu li #games ul li a.mba {
	background: url(../images/mbagames.jpg) no-repeat;
	}
	
#mainMenu li #games ul li a.cb {
	background: url(../images/cb.jpg) no-repeat;
	}
	
#mainMenu li #games ul li a.snowmanwars {
	background: url(../images/snoman.jpg) no-repeat;
	}
	
#mainMenu li #games ul li a.arrowclimber {
	background: url(../images/ac.jpg) no-repeat;
	}
	
#mainMenu ul {
	display: -9999em;
	top: 100%;
	margin-left: 0;
	position: absolute;

}
#mainMenu ul li a {
	width: 95px;
}

#mainMenu li:hover ul {
	margin: 0;
}

and heres how i changed the menu in the html if you need it.

<li id="games"><a href="games.html">Games</a>
		<ul>
		<li id="mba"><a href="music_block_attack.html">music block attack</a></li>
		<li id="cb"><a href="cuddlybears.html">cuddly bears</a></li>
		<li id="snowmanwars"><a href="snowmanwars.html">snowman wars</a></li>
		<li id="ac"><a href="arrow.html">arrow climber</a></li>
	</ul>
</li>

thanks for all your help

RyanReese · April 24, 2012, 11:21am

You have this

#mainMenu li #games ul li a.cb {
	background: url(../images/cb.jpg) no-repeat;
	}

You have a space between the li and #games, which depicts that the id=“game” is on an child element, AND NOT an <li> :). Other than that your code looks correct.

shakmbakm · April 25, 2012, 2:53am

this code must hate me or something, nothing seems to be different. I’ll let you take a look at what its doing. Here’s a link http://superfunproductions.com

RyanReese · April 25, 2012, 3:13am

:).

You have this (this is an example, all are like this)

#mainMenu li#games ul li a.snowmanwars {
	background: url(../images/snoman.jpg) no-repeat;
	}

That depicts the ANCHOR having the class. Now lets look at your HTML and see if it matches.

<li id="snowmanwars"><a href="snowmanwars.html">snowman wars</a></li>

Nope. Not close :). Your code should read like this. Note that the <li> shouldn’t have any class at all (it doesn’t need to). The anchor does. And also note that using “.” in CSS depicts classes, not IDs (like you set)

<li><a href="snowmanwars.html" [b]class="snowmanwars"[/b]>snowman wars</a></li>

shakmbakm · April 25, 2012, 3:55am

oh ok, I was under the impression that id and class were the same thing in that context. Not sure where I got that from, Thank you.

RyanReese · April 25, 2012, 3:56am

Well you COULD stay with ID, although you’d have to change the CSS instead of the HTML. It doesn’t matter for this situation.

You’re welcome.