ah ok, I see. That defiantly helped, Though it is not showing up on hover. I think I am missing something for the hover. Like something on the #mainMenu li#games a:hover ?
Can you update the link (assume it’s still http://superfunproductions.com/) with all the updated code? It’s STILL showing the display:-999em blasphemy I have corrected for you already :).
If you want to individualize the hover links for each anchor, you would just tkae your code (you just wrote) and just add a class before the :hover. So the end of the rule would be like “a.snowmanwars:hover{}”
If you just want to generalize the hover links anchor (I doubt it, since you have different images for each) you’d do what you wrote :).
yeah thats the same link. yeah the code is different. here it is.
#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 the new html
<li id="games"><a href="games.html">Games</a>
<ul>
<li><a href="music_block_attack.html" class="mba">music block attack</a></li>
<li><a href="cuddlybears.html" class="cb">cuddly bears</a></li>
<li><a href="snowmanwars.html" class="snowmanwars">snowman wars</a></li>
<li><a href="arrow.html" class="arrowclimber">arrow climber</a></li>
</ul>
#mainMenu ul {
display: -9999em;
top: 100%;
margin-left: 0;
position: absolute;
}
OH derp
Yup, that was the problem thanks. Its now appearing on hover but the buttons seem to be invisible. I think a few may be behind the slideshow. Check out the link to see what I mean if you need to.
All the images are not found. Since the images are the only thing displaying (text-indent:-999em is set for the anchors) nothing will show.
Correct the image file paths and it’ll show :).
Images STILL not found for me. Do you not update the page whenever you make changes? Or do you not save :)?Though if I apply a red background to the dropdown, I see the dropdown being overlapped. Adding z-index:1 to “.container” makes it overlap the other stuff.
yeah i update the page, I just haven’t gotten to it today yet. Thats why it looks the same for you lol. sorry for the confusion.
So when will you be updating the page? If you update it now (or within the next hour or two) I can get this sorted out. Otherwise I’ll be at work.
http://superfunproductions.com/images/ac.jpg
http://superfunproductions.com/images/snoman.jpg
http://superfunproductions.com/images/cb.jpg
http://superfunproductions.com/images/mbagames.jpg
Edit-I lied. #header needs position:relative and z-index:6 to fix the dropdown issue.
gotcha, so I have updated and uploaded the new version. That fixed the overlapping problem. are those the image paths that you posted?
Yes those are the image paths according to your CSS. Are you sure you updated the images correctly? It appears you probably uploaded them to the wrong location (or you named them wrong in the CSS)
The dropdown appears to now be overlapping the other content (yay) if I put a BG color on it, so hte images just have to show now.
I’ll have to look into that and get back to you.
yup I thought I had uploaded them but apparently I hadn’t, good call thanks. Working now, yay! the only thing is there are fairly large gaps between each option, anyway to make those smaller?
The dropdown anchors heights are the issue. Each dropdown anchor has to have its own height set. It’s inheriting the default 78px from the #mainMenu li a{} rule.
Find out what each images height is (for each link) and set that height appropriately.
If you want space between that and hte other anchors then, give the <li>'s a bottom margin.
You need this snippet at the beginning of your css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img{
border:0;
}
address,caption,cite,code,dfn,th,var{
font-style:normal;
font-weight:normal;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;}
I think we both used the same sources because I ended up having to put this snippet in.
i got it to work fine a while ago without that. What is that supposed to do to it?