We created a specific right sidebar on some of our pages with items that are on a list. I assigned a class to the
("sexsidebar") and assigned CSS commands so that the
elements would behave differently when hovered upon.
So here's a sample of the HTML code for what's on the sidebar:
<li><a href="/secondURL">Indecent Assault</a></li>
<li><a href="/thirdURL">Child Pornography</a></li>
And then for the CSS:
ul.sexsidebar li a
ul.sexsidebar li:hover, li:hover a
color: #FFFFFF !important;}
This actually worked. But for some unknown reason, it affected the look of the dropdowns of the upper menus of "all" of our pages (also in
). This I really don't get since the sidebar was assigned a specific class after all (
). So naturally any CSS command pointing to it should be affecting only that class. But why are the upper menu dropdowns affected?
You can view a sample page here
. I have however removed the CSS commands for the sidebar (the part with a list of sexual offences) since they're messing up with the upper menu dropdowns. You will see the menus on the upper portion of the page with a green background and the dropdown when you hover on some of the menus.
Hope somebody can explain why a CSS command to the
affects the upper menu dropdowns. Will appreciate any feedback.