Hej. Mam bardzo banalny, a jednak trudny problem, z którym męczę się już dobrych kilku godzin (pewnie rozwiązanie mam gdzieś pod nosem, ale go nie dostrzegam u_u). Mianowicie, jak wyśrodkować tę o to uroczą nawigację? http://i.imgur.com/Fkwzimn.png
.navi ul, .navi li {
margin: 0;
padding: 0;
}
.navi ul {
background: gray;
list-style: none;
width: 100%;
}
.navi li {
float: left;
position: relative;
width: auto;
}
.navi a {
background: green;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.navi li:hover a {
background: #000000;
}
<header>
Logo i menu główne
<nav class="navi" role="navigation">
<ul>
<li><a href="">Strona główna</a></li>
<li><a href="">Kontakt</a></li>
<li><a href="#">Artykuły</a>
<ul id="submenu">
<li><a href="">Difference between SVG vs. Canvas</a></li>
<li><a href="">New features in HTML5</a></li>
<li><a href="">Creating links to sections within a webpage</a></li>
</ul>
</li>
<li><a href="">Newsy</a></li>
<li><a href="">Info</a></li>
</ul>
</nav>
</header>