4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Menu css

by rhinocl
3 replies
  • WEB DESIGN
    • |
When you go WARNING SITE NOT SUITABLE FOR MINORS.....> here and select MENU Adult Apparel|Dancewear|
The child items all turn grey.
When you hover over one of them it should turn light pink again with burgundy letters. However the pink background color only shows underneath (outside the selected list item) Below is the code pertaining to this.Any idea where I went wrong? It looks like the css inserts are fighting the original menu code.

Code:
.sub-menu { background: pink !important; }
.sub-menu a { color: #8f3253 !important; }

.sub-menu li:hover a {
    background: grey !important;
    color:  pink !important;
}

.sub-menu li ul li:hover{color: #8f3253 !important!important!; }
    }
.sub-menu li ul li :hover a{ color: #8f3253 !important!important!; 
}
#css #menu
  • Profile picture of the author RichKent
    I'm not 100% clear on what you're trying to accomplish, but you're going a bit nuts on the !important declarations. I'd say remove them all and make sure to place your code in the 'custom css' field in the back of the theme (Looks like Awake?). Also, you have !important!important set on the bottom 2 elements. Not sure what you're doing there. When you have 2 elements set to !important, the one that shows up lower in the cascade will get precedence.

    Personally I'd simplify the whole thing. Delete the grey entirely, and make the menus and submenus look the same.
    Signature
    Learn more about Wordpress and SEO
    {{ DiscussionBoard.errors[6712269].message }}
    • Profile picture of the author rhinocl
      What I'm trying to accomplish is to give the hovered over item more contrast than the theme gives it by default. As that does the same thing to all its children, I then need to write new css below that to turn hovered over children pink again.
      Yes I realized after that I can't nest !important tags.

      Originally Posted by RichKent View Post

      I'm not 100% clear on what you're trying to accomplish, but you're going a bit nuts on the !important declarations. I'd say remove them all and make sure to place your code in the 'custom css' field in the back of the theme (Looks like Awake?). Also, you have !important!important set on the bottom 2 elements. Not sure what you're doing there. When you have 2 elements set to !important, the one that shows up lower in the cascade will get precedence.

      Personally I'd simplify the whole thing. Delete the grey entirely, and make the menus and submenus look the same.
      Signature
      cheap search engine optimization
      {{ DiscussionBoard.errors[6715985].message }}
  • Profile picture of the author maywebdesigns
    li:hover ul {background:pink;} that is if I'm hearing you right.
    Signature
    Buyforatweet.com - Stop giving away your promotional items. Sell them for a tweet or FB post and watch them go viral.
    {{ DiscussionBoard.errors[6717079].message }}

Trending Topics