Currently, I am tackling the task of customizing a sidebar menu using CSS. This menu structure involves nested <ul> and <li> elements. The issue at hand is that when sub-menu items are hovered over, their parent elements also become activated.
My understanding is that a style like
#menu-sidebar-main>li:hover>a<li><a> element within the top-level <ul>, designated as #menu-sidebar-main. Is there a similar technique to prevent lower-level <li> elements from affecting higher-level elements?
In the examples provided below, you can observe that hovering over a MID-LEVEL element triggers highlighting of its parent TOP-LEVEL element as well. Similarly, when hovering over a BOTTOM-LEVEL element, both its parent MID-LEVEL and TOP-LEVEL elements are highlighted.
Take a look at the code snippet and JS Fiddle link for further reference:
/* CUSTOM STYLING FOR SIDEBAR MENU */
/* Top Level Styles */
#menu-sidebar-main {
padding: 0px;
list-style-type: none;
text-transform: uppercase;
}
#menu-sidebar-main li {
background-color: #797979;
}
#menu-sidebar-main li a {
padding-left: 10px;
color: #000000;
text-decoration: none;
}
#menu-sidebar-main>li:hover,
#menu-sidebar-main>li:hover>a {
background-color: #791416;
color: #ffffff;
}
/* Mid-Level Styles */
#menu-sidebar-main li ul {
padding: 0px;
list-style-type: none;
}
#menu-sidebar-main li ul li {
background-color: #b3b2b2;
}
#menu-sidebar-main li ul li a {
padding-left: 10px;
color: #000000;
text-decoration: none;
}
#menu-sidebar-main>li>ul.sub-menu>li:hover,
#menu-sidebar-main>li>ul.sub-menu>li:hover>a {
background-color: #791416;
color: #ffffff;
}
/* Bottom-Level Styles */
#menu-sidebar-main li ul li ul {
padding: 0px;
list-style-type: none;
}
#menu-sidebar-main li ul li ul li {
background-color: #edebeb;
}
#menu-sidebar-main li ul li ul li a {
padding-left: 20px;
color: #000000;
text-decoration: none;
}
#menu-sidebar-main>li>ul.sub-menu>li>ul.sub-menu>li:hover,
#menu-sidebar-main>li>ul.sub-menu>li>ul.sub-menu>li:hover>a {
background-color: #791416;
color: #ffffff;
}
/* Current Page Highlighting */
li.current_page_item {
background-color: #791416 !important;
}
li.current_page_item a {
color: #ffffff;
}<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8>
<title>Test</title>
</head>
<body>
<ul id="menu-sidebar-main" class="menu">
<li id="menu-item-268" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-71 current_page_item menu-item-has-children menu-item-268"><a href="#">Top Level Active Page</a>
<ul class="sub-menu">
<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="#">Mid Level</a></li>
<li id="menu-item-270" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a href="#">Mid Level</a></li>
<li id="menu-item-271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="#">Mid Level</a></li>
<li id="menu-item-272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-272"><a href="#">Mid Level</a>
<ul class="sub-menu">
<li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="#">Bottom Level</a></li>
<li id="menu-item-274" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="#">>Bottom Level</a></li>
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a href="#">>Bottom Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>