menu css menu display centre rather than left - html

Question

I have this html code:
<div class="cont">
<div class="header">
header
</div><!-- header -->
<div id="cssmenu">
<ul>
<li><span>LINK</span></li>
<li><span>LINK</span></li>
<li><span>SUB LINK</span>
<ul>
<li><span>LINK</span></li>
</ul>
</li>
</ul>
</div>
</div><!-- cont -->
with this CSS for my menu:
#cssmenu *{
z-index: 999;
}
#cssmenu ul { margin: 0; padding: 0; text-align: center; }
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {
width:100%;
max-width:1000px;
height: 50px;
background-color: #666666; /* main background color */
}
#cssmenu > ul > li {
display: inline-block;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #FFFFFF; /* main link text color */
font-weight:bold;
font-size: 15px;
line-height: 50px;
padding: 16px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff; /* main link text hover color */
background-color:#666666; /* main link background hover color */
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #666666; /*submenu link background color */
text-align: left;
position: absolute;
top: 30px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 50px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(250,250,250) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
color: #FFFFFF; /* submenu link text color */
font-size: 13px;
background-color: #666666; /*submenu background color (behind links) */
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu > ul > li:hover {
background-color:#666666; /*background color that shows on the main menu link when hovering over the sub menu */
}
#cssmenu > ul > li:hover > a{
color: #FFFFFF; /* main menu link hover text color */
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
background-color:#666666;
padding: 16px 0 20px 0;
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1; left: 196px;
visibility: visible;
}
#cssmenu ul ul a:hover{
background-color: #666666; /*submenu link hover color */
/* color:#000000; */
}
#cssmenu > ul > li.active {
background-color:#666666;
}
as the page width gets bigger, the menu displays more to the left. how can i make is always display center under the header?
here is a fiddle with my full code: http://jsfiddle.net/Nqxe9/

Answer 1

To your CSS add the styles:
#cssmenu {
margin:0px auto;
padding: 9px 9px 0;
}
Fiddle :http://jsfiddle.net/Nqxe9/5/
Perfect!!
Done ;)

Answer 2

Add below css for li.
#cssmenu > ul > li {
display: inline-block;
float: left;
margin-left: 15px;
position: relative;
}
you need to add float:left
Live Demo

Answer 3

I added a margin: 0 auto;
JSFiddle

Answer 4

I'd like to see the CSS for your header; however, if you're trying to make it stay under the header I'd make a div to surround the header and the menu and put properties to that div to center it.
<div class="Container"><!-- Maybe make this class header depending on your css -->
<div class="header">
header
</div><!-- header -->
<div id="cssmenu">
<ul>
<li><span>LINK</span></li>
<li><span>LINK</span></li>
<li><span>SUB LINK</span>
<ul>
<li><span>LINK</span></li>
</ul>
</li>
</ul>
</div>
</div> <!-- Close the new div here -->