CSS - How can I center my navigation bar? - html

Question

I am new to HTML/CSS so please don't hurt me :)
How can I center my navigation? I've researched as much as I can...
CSS:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
width:auto;
height:auto;
text-align:center;
}
#navigation ul li {
display:inline-block;
margin-right:-2px;
position:relative;
}
#navigation ul li a {
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#navigation ul li a:hover {background: #666;}
#navigation ul ul {
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#navigation ul.submenu li {
display:block;
}
#navigation ul.submenu li a {
display:block;
background:#fff;
color: #000;
}
#navigation ul.submenu li a:hover {background: #333;}
#navigation ul li:hover ul {
max-height: 10000px;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation.center {
display:block;
margin-left:auto;
margin-right:auto;
}
#navigation {
disply:inline-block;
height:50px;
}
HTML:
<div id="navigation">
<ul>
<li>Aperture Science
<ul class="submenu">
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
<ul>
<li>Black Mesa
<ul class="submenu">
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
Any help would be great! Thanks!
(Yes, my starter site is on Half Life and Portal)

Answer 1

You can try using below html code and css
HTML:
<div id="navMenu">
<ul>
<li>
Black Mesa
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
<li>
Black Mesa
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
CSS
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
#navMenu li {
margin: 0;
padding: 0;
text-align: left;
float: left;
list-style: none;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover {
background-color: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000;
}
fiddle : http://jsfiddle.net/Khumesh/adx2g1z0/

Answer 2

You need to adjust navigation Div by applying width and setting its margin property using css:
#navigation{
width:50%;
margin:0 auto;
}
Please refer to fiddle for demo