While working on developing a website to showcase the services of a company, I encountered an unexpected issue. When coding another section of the site, a strange bar appeared on my second menu for selecting categories. It's driving me crazy!
You can view the page here
<div class="menu2">
<div class="aux_960">
<ul>
<li><a href="#">saf</a></li>
<li><a href="#">saf</a></li>
<li><a href="#">saf</a></li>
</ul>
</div>
The issue seems to be related to the :after pseudo-element of the li tag in the second menu with three "saf" links at the bottom.
I've tried various solutions but nothing seems to work. The only thing that removed the bar was setting the li positioning to float:left, but it doesn't feel like the right approach.
In the jsfiddle link provided, the images may not show up, but you should still be able to see the bar issue.
Thank you for any help or advice!