Q:

display: inline-block creates bar on the bottom of the li

I'm developing a web site to display services of a company, the problem is that suddenly when i was coding other section of the site a bar appeared on my second menu, to select categories, that's crazy
here's the page link
<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>

It's right on the bottom of the :after pseudo-element of the li, on the second menu where we have three "saf" links
I tried to solve this, but nothing that i do seems to help it anyway, the only thing that removed the bar was setting the li positioning to float:left, but that dont feels right  
on this fiddle the images dont show up of course, but you guys should be able to see the bar
thanks!!

A:

Your issue comes from
.menu2 {
    display: block;
    line-height: 50px;
    font-weight: 700;
    text-decoration: underline;
}

Remove text-decoration: underline;
This blocks is lower in the code you have, there are 2 definitions of .menu2 this is in the second one
Working example http://jsfiddle.net/9Xm8k/8/
Here is the fix in your original code http://jsfiddle.net/9Xm8k/9/

