Sandy Albaytar Jr. Sandy Albaytar Jr. - 1 month ago 12
CSS Question

CSS for the sidebar affects the upper menu dropdowns

We created a specific right sidebar on some of our pages with items that are on a list. I assigned a class to the

ul
("sexsidebar") and assigned CSS commands so that the
li
elements would behave differently when hovered upon.

So here's a sample of the HTML code for what's on the sidebar:

<ul class="sexsidebar">
<li><a href="/firstURL">Rape</a></li>
<li><a href="/secondURL">Indecent Assault</a></li>
<li><a href="/thirdURL">Child Pornography</a></li>
</ul>


And then for the CSS:

ul.sexsidebar li
{background: #F5F5F5;
margin: 5px;}

ul.sexsidebar li a
{display: block;}

ul.sexsidebar li:hover, li:hover a
{background: #57AC68;
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
li
). This I really don't get since the sidebar was assigned a specific class after all (
ul class="sexsidebar"
). 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
class="sexsidebar"
affects the upper menu dropdowns. Will appreciate any feedback.

Answer

Look at the second part of this selector:

ul.sexsidebar li:hover, li:hover a

that selects li:hover a , i.e. every link in any list item on the whole page.

Change it to this:

ul.sexsidebar li:hover, ul.sexsidebar li:hover a