Dropmenu center align - html

Question

Here's the code. Notice that's NOT my code.
HTML:
<div class="drop">
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
CSS:
.drop_menu {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
padding:9px 20px;
margin-left:auto;
margin-right:auto;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
My question is, how can I center the "Link 1", "Link 2" and "Link 3"? On the future, I'll add more "Link 4,5,6...", so I need a solution that doesn't require "almost centered", but a permanent solution.
Can you please help me?
Here's a link to JSFiddle where you can see the code working - http://jsfiddle.net/W5F3p/
My best regards

Answer 1

If you're not supporting IE7 and below, I'd change the float:left on the li to a display:inline-block and then add text-align:center to the parent ul.
.drop_menu {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:30px;
text-align:center;
}
.drop_menu li { display:inline-block; }
.drop_menu li a {
padding:9px 20px;
margin-left:auto;
margin-right:auto;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
text-align:left;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
See here: http://jsfiddle.net/s6Jcx/1/

Answer 2

Use text align in the container tag and set the list to display inline-block:
http://jsfiddle.net/W5F3p/1/
.drop
{
text-align: center;
background:#005555;
}
A little hacky but does the trick.