Target the ul following the active ul in a menubar - html

Question

I'm putting together a WP website, and on the menu bar the active menu item is underlined. All of the menu items (li) had a padding-right set on them, but I need to take it off the active element so that the border on the bottom only extends to the end of the text. To make up for it, I need to somehow target the next li but I can't quite figure out how to do it. I'm working in the context of someone else's WP theme which is always a challenge but I think this is probably doable, I just don't know quite how to combine the CSS selectors. Here's the basic menu structure:
<nav id="top-menu">
<ul id="menu-top">
<li id="menu-item">
<a>ITEM 1</a>
</li>
<li id="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li id="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
To target the padding on the element, I have to use #top-menu ul > li#current-menu-item > a
So if I wanted to target the 3rd element in this example, what code would I use? Is this even possible, or am I trying to be too specific? I'm hoping some combination of child and descendant selectors, but I'm not sure how I can make it all work together. Thanks for your help!

Answer 1

Usually in situations like this I resort to a bit of jQuery. With jQuery, you can use next() to get the li after the one you've targeted.
First, you've mixed up ids and classes. You need to be using classes here (ids cannot be repeated):
<nav id="top-menu">
<ul id="menu-top">
<li class="menu-item">
<a>ITEM 1</a>
</li>
<li class="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li class="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
Then this would give you the li after the current one:
$('.current-menu-item').next()
So you could do something like add another class to it (obviously my class name is waaaayyy longer than it really needs to be!):
$('.current-menu-item').next().addClass('the-one-after-the-current-menu-item');
Which you could then style via css.
.the-one-after-the-current-menu-item { // styling here.... }

Answer 2

Yes, the "+" in CSS selects the element after whatever. In this case, something like this:
#current-menu-item + li {
background: red;
}
Although, you may have another problem in that you can't use spaces in IDs. If the IDs in your example were classes instead, you'd be completely fine.

Answer 3

as pointed out by russtuck91, that current-menu-item needs to be a class, then his answer is the one i would implement, it is the cleanest.
however if you cant change that (which you have to as you cant have spaces in id's), you can use :nth-child(x) where x is the number of child elements down:
#top-menu li:nth-child(3) a {
color:red;
}
will still recommend russtuck91's answer though