Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy CSS drop doesn't work. Don't know what to do.

    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
    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;
    	}
    	 #sub ul li{
    		position: absolute; 
    	display: none; 
    	list-style: none; 
    	border: solid; 
    	} 
     #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  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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Here's a good article at http://htmldog.com/articles/suckerfish/dropdowns/ on how to make a drop down effect.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    codeslave (11-11-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

    Code:
    #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;
    }

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    This link should help. Go to the "Grab The HTML" link towards top of page and you will see horizontal drop menu examples. Hope this helps.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •