SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

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

    Background Override For Dropdown Menu

    I have the page linked below...

    LINK-
    http://www.securehostserver.info/anderson/about/

    I have applied a body id for each section, the page linked above has the id="about" and so I have added the rule #about #nav li.about a so that I can keep the rolled over state of that button to show the background. This is set to help the web visitor to show which page they are on.

    No problems so far.

    The problem comes when I tried to add the dropdown CSS rules. They work accurately on all of the dropdowns EXCEPT for the ones associated with the current page. So if you are on the about page, the about dropdown inherits the background image from the previous rule (#about #nav li.about a).

    How can I make it so that all of the dropdowns (#about #nav li.about ul li a) do not show the background image?

    Todd
    Todd Temple > T2 Design

  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 Todd,

    As you have probably noticed you've got caught up in some hefty specificity rules there. That's due to having those concatenated ID's.

    I usually put classes on my body element for page specific styling, not sure if that would have helped a lot here though. That gets IE6 working too since it will ignore the first ID when two ID's are used in a concatenated selector.

    On line 47 and 48 of your css is where you are resetting the li li a rules.

    Code CSS:
    #nav li.home li a, #nav li.about li a, #nav li.companies li a, #nav li.corporate li a, #nav li.news li a, #nav li.contact li a { background: #044784; height: auto !important; padding: 0 8px; color: #FFF; text-indent: 0; width: 180px; margin: 0; cursor: pointer; border-top: 1px #949494 solid; }
    #nav li.home li a:hover,#nav li.about li a:hover,#nav li.companies li a:hover,#nav li.corporate li a:hover,#nav li.news li a:hover,#nav li.contact li a:hover { background: #235CB3; color: #FFF; text-decoration: none; cursor: pointer; }

    If you will add the page specific selectors alongside of the relevant selectors you will be able to get your styles back. Your basically just grouping the concatenated selectors in.

    Sorry, I had to reformat it, that inline css is too troublesome for me to work with.

    This should work -

    Code:
    #nav li.home li a, #home #nav li.home li a, 
    #nav li.about li a, #about #nav li.about li a,
    #nav li.companies li a, #companies #nav li.companies li a,
    #nav li.corporate li a, #corporate #nav li.corporate li a,
    #nav li.news li a, #news #nav li.news li a,
    #nav li.contact li a, #contact #nav li.contact li a {
        background: none repeat scroll 0 0 #044784;
        border-top: 1px solid #949494;
        color: #FFFFFF;
        cursor: pointer;
        height: auto !important;
        margin: 0;
        padding: 0 8px;
        text-indent: 0;
        width: 180px;
    }
    #nav li.home li a:hover, #home #nav li.home li a:hover,
    #nav li.about li a:hover, #about #nav li.about li a:hover,
    #nav li.companies li a:hover, #companies #nav li.companies li a:hover,
    #nav li.corporate li a:hover, #corporate #nav li.corporate li a:hover,
    #nav li.news li a:hover, #news #nav li.news li a:hover,
    #nav li.contact li a:hover, #contact #nav li.contact li a:hover  {
        background: none repeat scroll 0 0 #235CB3;
        color: #FFFFFF;
        cursor: pointer;
        text-decoration: none;
    }

  3. #3
    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 Rayzur View Post
    This should work -
    And it did! Thanks so much. I guess I should have been able to figure that one out on my own... Nevertheless, I appreciate your fix and explanation. Thank you Rayzur!
    Todd Temple > T2 Design


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
  •