When constructing my menu, I have organized it using the following HTML structure:
<div id=”navigation”>
<ul>
<li class=”level1”>Top Level Menu item
<div class=”sublevel”>
<ul>
<li class=”level2”>Second Level Item1
<ul>
<li class=”level3”>Third Level Item1</li>
<li class=”level3”>Third Level Item2</li>
<li class=”level3”>Third Level Item3</li>
</ul>
</li>
<li class=”level2”>Second Level Item2
<ul>
<li class=”level3”>Third Level Item4</li>
<li class=”level3”>Third Level Item5</li>
<li class=”level3”>Third Level Item6</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
I have applied a CSS style to the level 2 class as shown below:
#navigation .level1 ul li {
background: #acacac;
padding-bottom: 40px !important;
border-radius: 10px;
position: absolute;
}
The challenge arises when this styling is inherited by all child menu items. How do I go about targeting only the level2 items and exclude the level3 ones?
Despite consulting CSS documentation and attempting different combinations of > and +, I have not been successful in resolving this issue.