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
    Jul 2009
    Posts
    2
    Member #
    19366
    Hello,

    I am currently having issues with my CSS Rollover menu. I am unable to make the parent top item stay highlighted while they are scrolling through the submenu items.

    I have tried the li:hover and it works. The background stays white when I scroll down to the submenu items but the font color goes back to being white. I even tried putting the color option on the li:hover to black but only the background stays white.

    The other issue I wanted to address was doing this also selects my right-margin area as well which is not what I want. What options do I have for spacing out my navigation evenely and the area not getting highlighted because of me using the li:hover method.

    #navigation {width: 800px; height: 30px; position: absolute; margin: 100px 0 0 11px; padding: 0px; font-size: 12px; font-family: Arial; font-weight: bold; color: #FFFFFF;}
    #navigation li {display: inline; float: left;}
    #navigation li:hover {background: #FFFFFF; color: #000000;}
    #navigation li a {display: block; height: 16px; margin-right: 20px; padding: 10px;}
    #navigation li a:hover {background: #FFFFFF; color: #000000;}
    #navigation ul li {position: relative; width: 150px; clear: left;}
    #navigation li ul {position: absolute; left: -1px; top: 36px; display: none; border-bottom: 1px solid #8cbf10;}
    #navigation ul li a {display: block; text-decoration: none; margin: 0; color: #000000; padding: 5px; border: 1px solid #8cbf10; border-bottom: 0; border-top: 0; background: #FFFFFF;}
    #navigation ul li a:hover {background: #8cbf10; color: #FFFFFF;}
    #navigation li:hover ul {display: block;}

    Thank you very much!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    This is hard to answer without seeing your whole page for real.

    I suggest you look at this site (see link below) and try out various
    menus. You can view the HTML and CSS for each menu by using
    your browser (view source).

    http://www.cssplay.co.uk/menus/


    There are about 200 different menus there ... with every combination
    of vertical, horizontal, fly-out, drop-down, etc.


  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    yeah we need to see the page for sure as well as the html but i can read source if we could get the page. but i will say that is a misuse of clear and of display.

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

  5. #4
    Junior Member
    Join Date
    Jul 2009
    Posts
    2
    Member #
    19366
    I was able to figure it out. I had to have not just li:hover but li:hover a and the change the color: in there. The reason I used the clear like that was because otherwise my rollover submenus were appearing horizontal instead of vertical. I used the clear function to get the menu to drop to vertical. It works and I tested it in cross browsers and had no issues.


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