ThemeShaper Forums » Thematic

[closed]

Thematic Menu css question

(3 posts)
  • Started 9 years ago by elderberry
  • Latest reply from elderberry
  • This topic is resolved

Tags:

  1. elderberry
    Member

    The top level link appears to vanish when you hover over items in the second level dropdown. Hover over the About link is fine, but when you move the cursor down over High Ridge Board the About text changes color to match the background :-( http://horses.alterra-wv.com/

    /*** THEMATIC SKIN ***/
    .sf-menu {
    border-right:1px solid rgb(102,153,153);
    float:left;
    }
    .sf-menu a {
    border-left:1px solid rgb(102,153,153);
    border-top:1px solid rgb(102,153,153);
    border-bottom:1px solid rgb(102,153,153);
    padding:9px 13px;
    text-decoration:none;
    }
    .sf-menu .current_page_item a,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    border-bottom-color:rgb(245,245,223);
    background:rgb(245,245,223);
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color:rgb(102,153,153);
    }
    .sf-menu li {
    background: rgb(153,194,194) url(http://high-ridge.alterra-wv.com/button-off.gif) repeat-x 0px -10px;
    }
    .sf-menu li li {
    background:rgb(153,194,194) url(http://high-ridge.alterra-wv.com/button-off.gif) repeat-x 0px -10px;
    }
    .sf-menu li li li {
    background:rgb(245,245,223);
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    color : #fff;
    background : rgb(102,153,153) url(http://high-ridge.alterra-wv.com/button-on.gif) repeat-x 0px -10px;
    outline: 0;
    border-bottom-color:#ccc;
    }
    .sf-menu ul {
    border-right:1px solid gb(102,153,153);
    border-bottom:1px solid gb(102,153,153);
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    }
    .sf-menu ul ul {
    margin-top:0;
    }
    .sf-menu ul a {
    background:#fafafa;
    border-bottom:none;
    }
    .sf-menu ul a:hover {
    color: #FFF;
    }

    Posted 9 years ago #
  2. it is "vanishing" b/c it is no longer holding the :hover pseudoclass that changes the color in the first place. so it is reverting to the default "down-state" color.. which i think is the same color as your background.

    you are using .sf-menu li.sfHover - so the LI element is getting the blueish background, but the link isn't getting the same definition.

    try adding .sf-menu li.sfHover a into the style rule for the hovers.

    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu li.sfHover a,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
         color : #fff;
        background : rgb(102,153,153)  url(http://high-ridge.alterra-wv.com/button-on.gif) repeat-x 0px -10px;
    	outline:		0;
        border-bottom-color:#ccc;
    }
    Posted 9 years ago #
  3. elderberry
    Member

    Thanks! Worked perfectly.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.