Отступ снизу у inline-block элемента

[inex]

Добрый день, столкнулся с вот такой штукой, вот допустим меню

<section class="menu">
        <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a></li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
        </ul>
</section>

    .menu{
        text-align: center;
        overflow: hidden;
    }
        .menu ul{
            display: inline-block;
        }
            .menu li{
                float: left;
            }
                .menu li a{
                    display: block;
                    padding: 15px 35px;
                }

Всё выравнивается по центру как нужно, но у <ul> получается отступ снизу на пикселя 4.

margin:0 и padding:0 ничего не дают. Но если убрать inline-block у <ul> , то отступа нет, но отсюда другая проблема, тогда меню не выравнивается по центру... Как правильно реализовать?

Заранее спасибо!

[dmitriydrachov]

<div id="menu_position">
<div id="menu">
	 <ul>
	 <li><a href="#">1</a></li>
	 <li><a href="#">22</a></li>
	 <li><a href="#">333</a></li>
	 <li><a href="#">4444</a></li>
	 <li><a href="#">55555</a></li>
	 <li><a href="#">666666</a></li>
	 <li><a href="#">666666</a></li>
	 <li><a href="#">666666</a></li>
	 <li><a href="#">666666</a></li>
	 </ul>
</div>
</div>

* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#head {
position: relative;
width: 100%;
height: 30%;
outline: 1px solid #cc0000;
}
#menu_position {
width: 100%;
position: absolute;
bottom: 0px;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li{
font-size: 2em;
margin-right: 20px;
display: inline;
}
#menu ul li a {
text-decoration: none;
}
#menu ul li a:hover {
color: rgba(255,0,0,0.5);
}

Edited February 10, 2013 by dmitriydrachov

[inex]

Точняк...не к тому элементу inline применил, спасибо.