After creating a ul element, I have customized the html and css for my navigation bar:
Html:
<ul id="list-nav">
<li><a href="Marsrutas.html">Item1</a>
</li>
<li><a href="Nuotraukos.html">Item2</a>
</li>
<li><a href="Apie zygi.html">Item3</a>
</li>
<li><a href="Apie mane.html">Item4</a>
</li>
<li><a href="Dviraciai.html">Item5</a>
</li>
<li><a href="Kontaktai.html">Item6</a>
CSS:
ul#list-nav {
margin:40px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
text-align: center;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:65px;
color:#eee;
float:left;
margin:5px;
}
ul#list-nav li a {
text-align:center;
}
ul#list-nav li a:hover {
color:#000;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
}
I am looking for guidance on how to center align this navigation bar on the page.
Additionally, I would like to know how to prevent the li items from moving slightly downwards when hovered over, as demonstrated in this example: http://jsfiddle.net/bufbond/uJ76F/