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 4 of 4
  1. #1
    Junior Member
    Join Date
    Sep 2010
    Posts
    8
    Member #
    23692
    So i have this a menu which uses an image for the background which changes on rollover. have a look here : Events4Gold - Where Gold Supports Your Cause

    I am trying to add a drop down under one of the buttons on rollover but nothing happens. Below I have the CSS and HTML. Any and all help is greatly appreciated. Thanks in advance for your time and effort.


    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>

  2.  

  3. #2
    Senior Member krystof's Avatar
    Join Date
    Jul 2005
    Posts
    155
    Member #
    10668
    Liked
    6 times
    Your gold fade-in buttons are nice. Sorry I have not yet mastered rollovers or dropdowns either. If nobody answers here, suggest you view -> source of another site that works the way you would like. Or fiddle with the example code from searching "rollover menu tutorial." First setup a test webpage using the example code precisely as given, make sure it works. Then piece-by-piece place your own links into the example. Be sure to test in both firefox and Explorer.

  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I don't see the nested ul list with the online code like you have posted here.

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    Code:
    <html>
    <head>
    <style>
    li { list-style: none; }
    #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 { display:block; top:0; left:0; height:100%; width:100%; background:transparent url(../navegation.jpg) no-repeat; }
    #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.sub { display: none; } 
    #navigation li:hover ul.sub { position: absolute; display: block; border: solid; }
    #navigation li:hover ul.sub li a { display: block; }
    </style>
    </head>
    <body>
      <ul id="navigation">  
        <li ><a class="home" href="http://www.events4gold.net">1</a></li>  
        <li ><a class="aboutus" href="http://www.events4gold.net/aboutus.html">2</a></li>
        
        <li ><a class="whyHost" href="http://www.events4gold.net/holdinganevent.html">3</a></li>  
        <li><a class = "fundraiser" href = "http://www.events4gold.net/fundraiser.html">4</a>
        <ul class="sub">
        <li><a href="http://www.events4gold.net/whoarewe.html">5</a></li>
        <li><a href="http://www.events4gold.net/whatwedo.html">6</a></li>
        </ul>
        </li>
            
        <li><a class ="party" href= "http://www.events4gold.net/party.html">7</a></li> 
        <li ><a class="contactus" href="http://www.events4gold.net/contactus.html">8</a></li>  
    </ul>
    </body>
    </html>
    some conflict i didn't take time to diagnose won't allow me to display: block on the <a tags in the sub. you need to go re-read naming conventions for css. your idea of class and id appointment in your css is wrong. and personally i loath the code layout of editors, grrrrr.

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


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:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com