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 8 of 8

Thread: CSS DropDown

  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS DropDown

    Hi

    I have used a CSS drop down menu to work providing information on my site.

    To make this clearer. When you hover over a name, it provides details about that person in the drop down menu.

    However, as this is tabled with one persons name under the next, I want the drop down to ONLY show up when you hover over the headlink. Meaning that when you lower the mouse onto the drop down list, it disappears.

    Can this be done and can anyone help with the code?

    The current code for my drop down is as follows

    Code:
    /* General */
    	#rankingsdropdown, #rankingsdropdown ul { list-style: none;}
    	#rankingsdropdown, #rankingsdropdown * { padding: 0; margin: 0; }
    	
    	/* Head links */
    	#rankingsdropdown li.headlink { width: 137px; float: left; margin-left: -1px; text-align: center; }
    	#rankingsdropdown li.headlink a { padding: 15px; }
     
    	/* Child lists and links */
    	#rankingsdropdown li.headlink ul { position:absolute; display: none; width: 137px; border: 1px black solid; background-color: white; text-align: left; }
    	#rankingsdropdown li.headlink:hover ul {display:block}
    	#rankingsdropdown li.headlink ul li a { padding: 5px; }
    	#rankingsdropdown li.headlink ul li a:hover { background-color: #333; }
    	
    	/* Pretty styling */
    	body { font-family: verdana, arial, sans-serif; font-size: 0.8em; background-color: black; }
    	#rankingsdropdown a { color: white; } 
    	#rankingsdropdown ul li a:hover { text-decoration: none; }
    	#rankingsdropdown li.headlink { background-color: white; background: white; margin-left:auto; margin-right:auto }
    	#rankingsdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
    Thanks!
    Last edited by kickthat; 10-20-2010 at 02:30 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Something like:

    Code:
    #rankingsdropdown li.headlink ul:hover {display:none}
    should do it.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for the reply. It doesn't seem to be doing the trick. I might not be doing it right. Are you suggesting that I simply add it to the code, if so, where?

    Or are you suggesting that I should be replacing one of the existing lines of code with that?

    Thanks

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    No, that's an additional line of css. I'm assuming that the .headlink is the menu item we're talking about. If that doesn't work, can you give a link to your page - otherwise I'm just guessing at your html?

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The page is at:
    http://www.keelefoos.co.uk/national_rankings.htm

    That's without the line added.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The line should be in the css, under the display:block line:

    Code:
        #rankingsdropdown li.headlink:hover ul {display:block}
            #rankingsdropdown li.headlink ul:hover {display:none}
    Give that a try.

  • Users who have thanked SB65 for this post:

    kickthat (10-20-2010)

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    No go. Still not working.

  • #8
    New Coder
    Join Date
    Oct 2010
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Got it.
    Changed the {display:none} in the line of code you suggested to {visibility:hidden} seems to have done the trick.


  •  

    Posting Permissions

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