Got a menu with a background colour change on hover… I’ve gone as far as being able to change the first sub menu background, but dont know how to go further down.
.bcolor6>ul is fine… but how do I target the next submenu?
Oh and I cant target sub_subnav class as this is also used in another .bcolor and has different colours
You shouldn’t need !important to do this. You just need to give it a bit more specificity. If you are finding that !important is needed to make that block of code work, then it’s just specificity…if you post a link to the page in question I can confirm what you need to do.
Yeah I think I’m with you. I don’t foresee the !important rules here ever causing a problem, as I won’t need to use these classes again oh… heres the code for the nav though, if you do wish to say how I could be more specific and rid the important rule…
We’d need your full css to work out what specificity is actually needed as it will depend on how you have already targeted those elements.
!important is fine to use when you know why you are using it and what the implications are. It is not fine to use when you don’t know why it is working as then it is basically a quick fix (hack).
Contrary to belief !important is a useful tool and can cut down on selectors when used in the right circumstances. However, often its over-use indicates that the logic of the page is lacking in some way and a simpler approach could usually provide more consistent results.
If I remove all the !importants from the above CSS then I see no difference in the display at all. This may be because there is some other code that we have not seen yet but as far as I can tell you don’t actually need any of the !importants in that above section.
There are some odd things however in that you have the FAQ section highlighted by default (which I assume is what you wanted)?
You are then changing the colour of the nested ul in that section to the same color that it already is which seems a bit pointless.
The background is already D0BDBE so there would seem no need to change it unless of course there is some js that turns this into a dropdown menu and positions elements elsewhere?
There is also a typo here with a missing class (.).
bcolor6:hover {background-color:#FCBDBE;}
Although that will probably have no impact on the proceedings.
Also note that there is no such html tag as an ‘h9’ as the highest is an h6. The heading level should be at the correct level for the placement of the html within that section which means that if you are using an h6 heading tag then that menu structure should itself be following a heading of h5.