...

View Full Version : CSS drop doesn't work. Don't know what to do.



codeslave
11-09-2010, 09:20 PM
Hey everyone,
So I have this navigation menu which uses a background image for the normal and rolloverstates. What i'm having trouble with is getting a drop down to come out of one of the buttons when the user rolls over. I don't know what to do with the CSS so that it doesn't take on the properties of the parent menu (the image) and so that it drops down. Any and all help is welcome. Thanks in advance for your time and effort!

Here is the CSS


#navigation
{
position: absolute;
left: 3px;
top: -1px;
width: 741px;
}

#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(../navegation.jpg);
display:block;
}
.home
{
background-position:0px 0px;
width:125px;
height:45px;
}

.aboutus
{
background-position:-125px 0px;
width:124px;
height:45px;
}

.whyHost
{
background-position:-249px 0px;
width:131px;
height:45px ;
}

.fundraiser
{
background-position:-383px 0px;
width:115px;
height:45px;
}
.party
{
background-position:-505px 0px;
width: 115px;
height:45px;
}


.contactus
{
background-position:-630px 0px;
width:125px;
height:45px
}

#navigation a .hover {
background: transparent url(../navegation.jpg) no-repeat;
display:block ;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;

}

#navigation .home .hover {
background-position: -0px -49px;

}
#navigation .aboutus .hover{
background-position: -125px -49px;

}
#navigation .whyHost .hover {
background-position: -249px -49px;
}
#navigation .fundraiser .hover {


background-position: -383px -49px;
}
#navigation .party .hover{
background-position:-505px -49px;
}
#navigation .contactus .hover {
background-position: -630px -49px;
}
#sub ul li{
position: absolute;
display: none;
list-style: none;
border: solid;
}
#sub li hover {
display: block;
}


and the HTML



<ul id="navigation">
<li ><a class="home" href="http://www.events4gold.net"></a></li>
<li ><a class="aboutus" href="http://www.events4gold.net/aboutus.html"></a></li>

<li ><a class="whyHost" href="http://www.events4gold.net/holdinganevent.html"></a></li>
<li><a class = "fundraiser" href = "http://www.events4gold.net/fundraiser.html"></a>
<ul id = "sub">
<li><a href="http://www.events4gold.net/whoarewe.html">How Does it Work</a></li>
<li><a href="http://www.events4gold.net/whatwedo.html">Who We DO</a></li>
</ul>
</li>

<li><a class = "party" href= "http://www.events4gold.net/party.html"></a></li>
<li ><a class="contactus" href="http://www.events4gold.net/contactus.html"></a></li>
</ul>

abduraooft
11-10-2010, 09:27 AM
Here's a good article at http://htmldog.com/articles/suckerfish/dropdowns/ on how to make a drop down effect.

codeslave
11-11-2010, 06:56 PM
So I tried that, but I get the same problem i've been getting which is the image I'm using for the parent menu is being showed as a background image for the submenu. here's what the code looks like now. Look towards to bottom to see what I did with for the sub menu



#navigation li
{
float:left;
}
#navigation li a
{
background-image:url(../navegation.jpg);
display:block;
}
.home
{
background-position:0px 0px;
width:125px;
height:45px;
}

.aboutus
{
background-position:-125px 0px;
width:124px;
height:45px;
}

.whyHost
{
background-position:-249px 0px;
width:131px;
height:45px ;
}

.fundraiser
{
background-position:-383px 0px;
width:115px;
height:45px;
}
.party
{
background-position:-505px 0px;
width: 115px;
height:45px;
}


.contactus
{
background-position:-630px 0px;
width:125px;
height:45px
}

#navigation a .hover {
background: transparent url(../navegation.jpg) no-repeat;
display:block ;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;

}

#navigation .home .hover {
background-position: -0px -49px;

}
#navigation .aboutus .hover{
background-position: -125px -49px;

}
#navigation .whyHost .hover {
background-position: -249px -49px;
}
#navigation .fundraiser .hover {


background-position: -383px -49px;


}
#navigation .party .hover{
background-position:-505px -49px;
}
#navigation .contactus .hover {
background-position: -630px -49px;
}



#navigation li ul {
background-image:none;
position: absolute;
width: 10em;
left: -999em;
}
#navigation li:hover ul {
left: auto;
}
#navigation li:hover ul, #nav li.sfhover ul {
left: auto;
}

optimus203
11-11-2010, 08:34 PM
This link (http://www.seoconsultants.com/css/menus/tutorial/) should help. Go to the "Grab The HTML" link towards top of page and you will see horizontal drop menu examples. Hope this helps.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum