SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with top level link staying active when hovering sublinks

    Hi,

    I have got a horizontal drop down menu working as it should but just can't seem to get the top level links to stay on when the sublinks are hovered over.
    The top level links on hover have a white background but this disappears when i hover over the sublinks, except when the top level is 'active'.
    I think i've tried every permutation I can think of but without success...if someone can take a quick look over the code maybe something obvious that i'm missing will surface...

    HTML:
    HTML Code:
    <div class="menu">
    <ul>
        <li><a href="#" title="About us"><span>About us</span></a>
        <!--[if lte IE 6]>
        <a href="#" title="About us">About us<table><tr><td>
        <![endif]-->
        <ul>
           <li><a href="#" title="Quotes" class="Quotes "><span>Quotes</span></a></li>
           <li><a href="#" title="History" class="History "><span>History</span></a></li>
           <li class="last"><a href="#" title="Press" class="Press "><span>Press</span></a></li>
        </ul>
        <!--[if lte IE 6]>
    	</td></tr></table>
        </a>
        <![endif]-->
      </li>
      <li><a href="#" title="Booking" class="Booking "><span>Booking</span></a></li>
      <li><a href="#" title="Contact" class="Contact "><span>Contact</span></a></li>
     </ul>
    </div>
    CSS:
    Code:
    .menu {
    padding:0 0 67px;
    width:800px; 
    position:relative;
    z-index:100;
    text-transform: uppercase;
    font-weight: bold;
    height: 23px;
    border-top:3px solid #fff;
    border-bottom:1px solid #fff;
    font: Helvetica, Arial, sans-serif;
    font-size: 89&#37;;
    }
    .menu ul {
    padding:0; 
    margin:0;
    list-style-type: none;
    }
    /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
    .menu ul li {
    float:left; 
    position:relative;
    }
    /* Set the background color and the font size*/
    .menu ul li a, .menu ul li a:visited {
    display:block; 
    text-align:left; 
    text-decoration:none;  
    height:23px;  
    line-height:23px;
    padding: 0 13px;
    color: #fff;
    }
    .menu ul li a:hover, .menu ul li.active a, .menu ul li.active a ul li a:hover {color: #000; background: #fff;}
    /* make the dropdown ul invisible */
    .menu ul li ul {
    display: none;
    }
    
    /* specific to non IE browsers */
    /* set the background and foreground color of the main menu li on hover */
    .menu ul li:hover a, .menu ul li.active a{
    background-position: 0px 0px;
    }
    /* make the sub menu ul visible and position it beneath the main menu list item */
    .menu ul li:hover ul {
    display:block; 
    position:absolute; 
    top:23px; 
    left:0px; 
    width:120px;
    background:#fff;
    padding: 0 5px;
    }
    .menu li li {float:none;}
    /* style the background and foreground color of the submenu links */
    .menu ul li:hover ul li a {
    display:block; 
    background:#fff; 
    color:#000;
    padding: 4px 8px 0 8px;
    line-height: 9px;
    margin:0px;
    font-size: 90%;
    height: 16px;
    }
    .menu ul li:hover ul li a span {padding-left: 4px;}
    .menu ul li:hover ul li a
    .menu ul li ul li.last {padding-bottom: 2px;}
    /* style the background and foreground colors of the links on hover */
    .menu ul li:hover ul li a:hover {
    color:#feba12;
    }
    Thanks for any help

    G

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The trick to keeping the parent LI highlighted when child links are hovered is to use li:hover

    IE6 does not support :hover on anything but anchors so it needs a little js help if you need to support it.

    Something like this should show you the basics of how it works.

    http://www.css-lab.com/demos/nav/easy-dropdown.html
    http://www.css-lab.com/demos/nav/easy-dropdown-2.html

    Those are based off of the suckerfish dropdown menus, to make things a little more advanced and to support IE6 you can do something like this.

    http://www.css-lab.com/demos/nav/sf-drpdwn.html
    http://www.css-lab.com/demos/nav/cntr-float-drpdwn.html

    Dropdowns can be intimidating at first but the thing to remeber is that you must always reset the styles for the sublists so they don't inherit from the parent. View the page source of those demos for the css/html.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you mean this?

    Code:
    .menu ul li:hover a, .menu ul li.active a {
        background-position: 0px 0px;
        background:#fff;
        color:#000;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    For IE6 you would need to float the anchors on the top level to stop them expanding to 100&#37; width of the screen. Then also for IE6 review the conditional comment code as it doesn't seem to be correct.

    You would also need to remove the "li" from the li:hover styles for IE6 because its the nested anchor that hovers in IE6 and you should just be using :hover with no selector.

    See Stu Nichols site (CSS Play) for the full code or switch to the suckerfish menus instead if you don't understand how they work.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    yes that's got it working Paul...thanks, and thanks for the suckerfish link too it looks pretty informative.

    Much appreciated


Bookmarks

Posting Permissions

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