Jump to content

Help with CSS navigation menu

- - - - -

This topic has been archived. This means that you cannot reply to this topic.
1 reply to this topic

#1
the_code_charmer

the_code_charmer

    Learning Programmer

  • Members
  • PipPipPip
  • 68 posts
I have the navigation menu that changes on rollover but I want to add a submenu under one of the buttons. The reason i'm so confused is because I'm using an image for the menu. Can someone help me with adding a droop down to one of the buttons?....pretty please..here's the css and html

#navigation   
{
 position: absolute;
 left: 3px;
 top: -1px;
 width: 783px;
}   
  
#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;
 }


and the html:

<ul id="navigation">  
    <li ><a class="home" href="[URL]http://www.events4gold.net"></a></li[/URL]>  
    <li ><a class="aboutus" href="[URL]http://www.events4gold.net/aboutus.html"></a></li[/URL]>    
    <li ><a class="whyHost" href="[URL]http://www.events4gold.net/holdinganevent.html"></a></li[/URL]>  
    <li><a class = "fundraiser" href = "[URL]http://www.events4gold.net/fundraiser.html"></a></li[/URL]>
    <li><a class = "party" href= "[URL]http://www.events4gold.net/party.html"></a></li[/URL]> 
    <li ><a class="contactus" href="[URL]http://www.events4gold.net/contactus.html"></a></li[/URL]>  
</ul>  


#2
the_code_charmer

the_code_charmer

    Learning Programmer

  • Members
  • PipPipPip
  • 68 posts
I also would like for the drop down to be the same image design as the parent menu