Menu css

by 3 replies
4
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!; 
}
#website design #css #menu
  • 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.
    • [1] reply
    • 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.

  • Banned
    [DELETED]
  • li:hover ul {background:pink;} that is if I'm hearing you right.
Join the discussion

Next Topics on Trending Feed

  • 4

    Menu css

    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.