I am trying to center my unordered list (<ul>), but the layout is not as expected.
This is my CSS code:
.sub_menu {
background-image: url("../images/background_sub_navi.png");
background-position: center center;
height: 44px;
}
.sub_menu ul {
display: inline-block;
list-style-type: none;
}
.sub_menu ul li {
float: left;
font-family: 'Open Sans',sans-serif;
height: 41px;
margin-right: 20px;
margin-top: 7px;
}
.sub_menu_arrow {
background-image: url("../images/sub_menu_border_active.png");
background-position: center 17px;
bottom: -4px;
display: block;
height: 19px;
left: 50%;
margin-left: -75px;
position: absolute;
width: 160px;
}
This is my HTML:
<div class="sub_menu">
<div style="text-align: center;">
<ul>
<li class="active">das Team <span class="sub_menu_arrow"></span></li>
<li>Philosophie</li>
</ul>
<div class="kontaktbar_wrap" style="display: none;"></div>
</div>
</div>