Centering horizontal navigation bar - html

Question

How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/

Answer 1

if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!

Answer 2

remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}