SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS hover colors

    on my page at http://www.meadowlarkco.com/company2.php could someone take a look a let me know on my CSS at menunew.css what I need to change/add so that when I go over 'contact us' the submenu items are still colored #EAEAD6 but when you hover over them change to #FFFFFF


    thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually when I go over 'contact us' the submenu items...sales, csr, and dispatch should have a background color of #EAEAD6 but when I hover over them they should be #FFFFFF

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The problem is with this line:

    Code CSS:
    #mainMenu li:hover a {
        background:#FFFFFF;
    }

    That selector is targeting the "Contact Us" <a>... but also every <a> inside the sub-menu. If you don't need to support IE6, the easiest fix would be to use the child selector instead:

    Code CSS:
    #mainMenu > li:hover > a {
        background:#FFFFFF;
    }

    ...But that introduces a bug where the sub-menu doesn't have a background until the user hovers over it. To fix that, change the "#mainMenu li ul:hover" in line 107 (I think) to "#mainMenu li ul".
    I'm the web overlord for Graphic Business Systems

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made your suggested changes and that didn't seem to make any change?

  5. #5
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It looks like you have another point in the CSS that also needs the child selector fix:

    Code CSS:
    #mainMenu li.scriptHook a,
    #mainMenu li:hover a {
    	background:#FFFFFF;
    }
    I'm the web overlord for Graphic Business Systems

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks everyone for your help


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
  •