Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    I have the navigation menu that changes on rollover using an image 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? I've tried several approaches but everyone results in disaster...here's the css and html.I
    tried using a <ul> under the button where i want the submenu but when i do the CSS the submenu takes on the characterists of the parent menu which uses an image...What do I do?

    Thanks in advance fo ryour help

    Code:
    #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;
     }
    The HTML:
    Code:
    <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/holdingan...html"></a></li>  
        <li><a class = "fundraiser" href = "http://www.events4gold.net/fundraiser.html"></a></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>

    Thanks

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    #navigation li { float:left; overflow: hidden;
    }

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    I don't understand how that will fix my problem. The menu I have there is fine. the problem I have is I'm trying to add a submenu when the user rolls over the "fundraiser" button. This is what I tried with the HTML and CSS:
    Code:
     <li><a class = "fundraiser" href = "http://www.events4gold.net/fundraiser.html"></a></li>
        <ul id = "submenu">
        <li>.......</li>
        <li>.......</li>
    CSS:

    Code:
    #navigation li a submenu
    {
    }
    The problem is that no matter what i put inside of the {} for the CSS code the submenu looks like a screwed up version of the parent menu. My goal is to have a menu drop down from the "fundraiser" button on rollover. How would I do the CSS

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    I don't understand how that will fix my problem
    didn't try it but it must be wrong. ok.

    while($get_it !== true){ continue; }

  6. #5
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    also try and keep in mind that i use an image for the background of the parent menu, hence my problem...thank you so much for trying to help

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    please do not speak to the validity of the fix i offered without attempting it. the overflow is one problem that you are having. clear that up and move to the next problem if there is one. i have built many css menus by hand coding, not picked up off a freebe site or made in dreamweaver.

    while($get_it !== true){ continue; }

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    wow. you were so right. none of the code was anywhere close to working. this should get you started. when you have rendering trouble with IE then you will want to make use of overflow control.

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
    <style>
    * { margin: 0px; padding: 0px; }
    .main { position: absolute; }
    .main .main_list { display: inline; float: left; }
    .sub { position: absolute; display: none; list-style: none; border: solid; }
    li:hover .sub { display: block; }
    </style>
    <body>
    <ul class='main'>
    <li class='main_list'><a href="http://">Link 1</a></li>
    <li class='main_list'><a href="http://">Link 2</a></li>
    <li class='main_list'><a href = "http://">Link 4</a>
    <ul class='sub'>
    <li class='sub_list'>sub 1</li>
    <li class='sub_list'>sub 2</li>
    </ul>
    </li>
    <li class='main_list'><a href="http://">Link 3</a></li>
    </ul>
    </body>
    </html>

    while($get_it !== true){ continue; }

  9. #8
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    thanks a lot but it didn't work

    so i tried what you sent me and nothing happens on rollover. have a look here : Events4Gold - Where Gold Supports Your Cause

    I tried something else which also didn't work but maybe you could direct me in a better direction.

    Code:
    #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;
    	}
    	 #navigation ul sub{ position: absolute; 
    	display: none; 
    	list-style: none; 
    	border: solid; 
    	} 
     #navigation ul sub li hover {
    		display: block;
    		}
    and the html

    Code:
      <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 class = "who" href="http://www.events4gold.net/whoarewe.html"></a></li>
        <li><a class = "what" href="http://www.events4gold.net/whatwedo.html"></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>

  10. #9
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    so i tried what you sent me and nothing happens on rollover. have a look here : Events4Gold - Where Gold Supports Your Cause

    I tried something else which also didn't work but maybe you could direct me in a better direction.

    Code:
    #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;
    	}
    	 #navigation ul sub{ position: absolute; 
    	display: none; 
    	list-style: none; 
    	border: solid; 
    	} 
     #navigation ul sub li hover {
    		display: block;
    		}
    and the html

    Code:
      <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 class = "who" href="http://www.events4gold.net/whoarewe.html"></a></li>
        <li><a class = "what" href="http://www.events4gold.net/whatwedo.html"></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>

  11. #10
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    so i tried what you sent me and nothing happens on rollover. have a look here : Events4Gold - Where Gold Supports Your Cause

    I tried something else which also didn't work but maybe you could direct me in a better direction.

    Code:
    #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;
    	}
    	 #navigation ul sub{ position: absolute; 
    	display: none; 
    	list-style: none; 
    	border: solid; 
    	} 
     #navigation ul sub li hover {
    		display: block;
    		}
    and the html

    Code:
      <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 class = "who" href="http://www.events4gold.net/whoarewe.html"></a></li>
        <li><a class = "what" href="http://www.events4gold.net/whatwedo.html"></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>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com