SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Three Column Dropdown Menu With Odd Numbers

    I have a dropdown menu shown here:

    LINK-
    http://www.tocdocs.com/new/index.040113.php

    If you rollover the "Doctors" button in the main menu navigation you will see that I have split the buttons into three columns. The issue is when you do not have an even number of li's in the list then the last sub menu item (shown in the bottom right hand corner) does not have a orange stroke above it since there is no li to style. Can someone help me to figure out a way to extend the border-top so that the orange line is visible?

    Thanks in advance,
    Todd
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I just thought of a sneaky solution. Try adding the lines in red:

    Code:
    #nav li li a {
    background: #FFF !important;
    height: auto !important;
    padding: 0 8px;
    color: #647179;
    text-indent: 0;
    margin: 0;
    cursor: pointer;
    border-top: 1px #F47A1F solid;
    border-bottom: 1px solid #F47A1F;
    margin-bottom: -1px;
    width: 230px !important;
    line-height: 32px;
    font-size: 12px;
    }

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick ralph.m. Thanks again!
    Todd Temple > T2 Design

  4. #4
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I just thought of a sneaky solution. Try adding the lines in red:

    Code:
    #nav li li a {
    background: #FFF !important;
    height: auto !important;
    padding: 0 8px;
    color: #647179;
    text-indent: 0;
    margin: 0;
    cursor: pointer;
    border-top: 1px #F47A1F solid;
    border-bottom: 1px solid #F47A1F;
    margin-bottom: -1px;
    width: 230px !important;
    line-height: 32px;
    font-size: 12px;
    }
    Ralph.m, I spoke too soon. Try rolling over the "Doctors" sub menu. It pushes buttons out of their original space when hovered. And on the other dropdown menu items like under "Services", you can see the sub menu "bounce" or shift one pixel when you hover over one of the sub menu items.
    Todd Temple > T2 Design

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You are suffering from setting far too many rules in your CSS. For example, you set margins on your <a>, then set them again on A:hover. Don't do this unless those properties need to change, as they are inherited. Above, we changes the margin on your <a>s, but the rule in your a:hover is overriding what we had, which is a problem you don't need to have. So, if nothing else, remove this bit in red (line 26):

    Code:
    #nav li li a:hover { background: #647179 !important; color: #FFF; text-decoration: none; cursor: pointer; width: 230px !important; text-indent: 0; margin: 0; }

  6. #6
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. Its obvious that I am still learning! I did tinker around a bit more and found out that I can add the "margin-bottom: -1px" to the #nav li li instead of the #nav li li a or the #nav li li a:hover and rely on the inheritance. Thanks for looking at this and teaching me. I really appreciate your help!
    Todd Temple > T2 Design

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. Just remember that, if you have styles applying to a link, don't als add them to the :hover states of the link, because they are inherited anyway, and if you change the link styles later, you'll get weird results on hover.


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
  •