For the website I am working on, I have a cms system that is responsible for rendering menus. My current task involves selecting the children of the parent menu items, and here is how the code is being generated:
<div class="menu">
<ul>
<li></li>
<li><a href="" class="CurrentButton" ... />text</a>
<div>
<ul></ul>
</div>
</li>
</ul>
</div>
Despite my attempts with CSS to select it, I have not been successful except for using display: none;
.menu ul li div {
display: none;
}
.menu > ul > li > a.CurrentButton div {
display: block;
}
Could someone help identify what I might be doing wrong? Would it be easier to use a jQuery function for this task? I am new to jQuery, so I'm not sure how to approach writing a function for it.
The goal is to select the div within the li when the anchor inside that li has the class CurrentButton. If the anchor in the li does not have the class, then I want the div hidden.