SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Hover background color in flyout menu

    Hi, I have a menu that has a flyout menu. I need to remove the background color on hover. Can anyone help? Thanks.
    http://www.wordpressbyd.com/gustave/indextest.html

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can address the background colour of the flyout submenu with these styles.

    Code:
    ul#nav  li:hover li a,
    ul#nav  li.over li a{background:transparent}/* default no background on the flyout items*/
    
    ul#nav li:hover li a:hover,
    ul#nav li.over li a:hover{background:red}/* set the hover colour you need or make it transparent if none required*/

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, I gave it a try and it did not work. The flyout menu seems to be inheriting the styles from the main menu. Here is a bit of code. The bold is the color that is showing up on hover.

    /* this sets all hovered lists to red */
    #nav li:hover a,#nav li.over a,
    #nav li:hover li a:hover,#nav li.over li a:hover {
    color: #a5b531;
    background-color: #736d37;
    }

    /* set dropdown to default */
    #nav li:hover li a,#nav li.over li a {
    color: #FFFFFF;
    background-color: #95952e;
    }
    #nav li ul li a {
    width: 100px;
    } /* Sub Menu Styles */
    #nav li:hover ul,#nav li.over ul {
    margin-left:200px;
    margin-top: -10px;
    }

    Thanks for your help.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    No the code I gave you is working as I tested on your live site with css terminal and it works as expected.

    You must have added the css before the original rules and thus they would have been over-ridden.

    Add the code I gave you to the end of CSS or if you are confident find the matching rules in menu.css and change them directly.

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I added the code as you suggested. It fixes the background color issue. However I am using @font to load a no-web font. Upon rollover when your code is installed the font in the sub menu goes all wonky. Somehow the code is interfering with the font or the rollover on the subnav. Any ideas? Thanks.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You still haven't added my code so I can't tell if you've done it right but it will have no effect on the font at all.

    The problem you likely saw is that removing the background unmasked a problem with your code in that your list items wrapped to the next line and fell under the text below because you set the anchors to only 100px wide. This was masked when they has a background-colour but when you remove the background colour the wrapped text is visible.

    Either lengthen the list items anchores to accommodate the text or set white-space:nowrap to stop them wrapping.

    Here's how to lengthen them:

    Code:
    ul#nav,
    ul#nav ul,
    ul#nav ul li,
    ul#nav ul li a{width:180px}
    
    #nav li:hover ul,#nav li.over ul  {
    margin-left:180px;
    margin-top: -10px;
    }
    That should be used in conjunction with the code I already gave you

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    12
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So that solved the background color. Thanks. Can you help with one more thing. How do I change the color of the submenu rollover on the text? It seems like that is inheriting the color from the main menu as well. Thanks again.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You need to address the sub list items as anything you set on the top level will automatically apply to the nested children also.

    Code:
    ul#nav li:hover li a:hover,
    ul#nav li.over li a:hover{color:red}


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
  •