Why wont this menu get aligned in the middle of the page? - html

Question

I have been trying to create a menu that would be fixed in the middle of the page.
The menu is of 1170px in width and 30px in height with a blue line at the bottom.
Now....I'd like to make it a menu that is positioned in the middle of the page with the rest of the items on the page.
Align: center doesnt seem to work. What am I doing wrong?
<div align="center;" id="menu">
<ul>
<li>Nuestros Cursos
<ul>
<li>Spanish</li>
<li>English</li>
<li>French</li>
<li>German</li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
<ul>
<li>Preparación de exámenes
<ul>
<li>Spanish</li>
<li>English</li>
<li>French</li>
<li>German</li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
<ul>
<li>Estudiar en el Extranjero
<ul>
<li>Spanish</li>
<li>English</li>
<li>French</li>
<li>German</li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
<ul>
<li>Quienes somos
<ul>
<li>Spanish</li>
<li>English</li>
<li>French</li>
<li>German</li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
<ul>
<li>Trabaja con nosotros
<ul>
<li>Spanish</li>
<li>English</li>
<li>French</li>
<li>German</li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
</div>
CSS
/*-----------------------new menu I am working on------------------------*/
#menu {
width:1170px;
height:30px;
text-align:center;
margin-left: auto; /*margin left es right fontosak olyan szinten hogy amit meretnek valasztok a menure...azt szepent automatikusan kozepre helyezi*/
margin-right: auto;
border-bottom:solid 3px #289dcb; /*#68bc1d szep zold szint jelent*/
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}
#menu ul {
margin:0;
padding:0;
line-height:30px;
}
#menu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#3b3b3b; /*colours the menu and also the submenu background*/
}
#menu ul li a {
display:block;
height:30px;
width:200px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color: #FFF; /*colour of the text in the menu*/
border:1px solid #000;
}
#menu ul ul {
position: absolute; /* this is what orders the nested links to appear in a block under the main ul*/
visibility:hidden;
top:32px;
}
#menu ul li:hover ul { /* this is what makes the dropdown menu appear on hovering over it*/
visibility:visible;
}
#menu li:hover {
background:#ff5454; /* main menu box changes to this color (also the submenus) on hovering over it, red in this case*/
}
here is what it looks like: Demo js Fiddle

Answer 1

You simply need to add the following line to the css for #menu ul and it will center your menu.
display: inline-block;
Here is a modified version of your jsfiddle.

Answer 2

This CSS will do the trick. DEMO
I didn't use display: inline-block because it will give you gap between each <li>.
Instead i have used display: table and display: table-cell to make it align properly without any gaps in between list.
#menu {
width: 1170px;
height: 30px;
margin-left: auto;
margin-right: auto;
border-bottom: solid 3px #289dcb;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
display: table;
}
#menu ul {
margin: auto;
padding: 0;
line-height: 30px;
display: table-cell;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #3b3b3b;
width: 100%;
}
#menu ul li a {
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFF;
border: 1px solid #000;
}

Answer 3

You actually require modification to both your HTML and CSS:
Crucial points:
You were adding successive lists to #menu where you only need one, with child li for each menu item
text-align:center needed to be added to #menu and display:inline-block to #menu ul for centering to happen
Demo Fiddle
HTML
<div id="menu">
<ul>
<li>Nuestros Cursos
<ul>
<li>Spanish
</li>
<li>English
</li>
<li>French
</li>
<li>German
</li>
</ul>
</li>
<li>Preparación de exámenes
<ul>
<li>Spanish
</li>
<li>English
</li>
<li>French
</li>
<li>German
</li>
</ul>
</li>
<li>Estudiar en el Extranjero
<ul>
<li>Spanish
</li>
<li>English
</li>
<li>French
</li>
<li>German
</li>
</ul>
</li>
<li>Quienes somos
<ul>
<li>Spanish
</li>
<li>English
</li>
<li>French
</li>
<li>German
</li>
</ul>
</li>
<li>Trabaja con nosotros
<ul>
<li>Spanish
</li>
<li>English
</li>
<li>French
</li>
<li>German
</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
text-align: center;
}
#menu ul {
height: 30px;
display:inline-block;
margin: 0;
position:relative;
padding: 0;
line-height: 30px;
border-bottom: solid 3px #289dcb;
/*#68bc1d szep zold szint jelent*/
;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #3b3b3b;
/*colours the menu and also the submenu background*/
;
}
#menu a {
display: block;
height: 30px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFF;
/*colour of the text in the menu*/
border: 1px solid #000;
}
#menu ul ul {
position: absolute;
/* this is what orders the nested links to appear in a block under the main ul*/
visibility: hidden;
top: 32px;
left:0;
}
#menu ul li:hover ul {
/* this is what makes the dropdown menu appear on hovering over it*/
visibility: visible;
}
#menu li:hover {
background: #ff5454;
/* main menu box changes to this color (also the submenus) on hovering over it, red in this case*/
;
}

Answer 4

Replace the given css and try, hope it will work fine
#menu {
width:1170px;
height:30px;
text-align:center;
margin-left: auto; /*margin left es right fontosak olyan szinten hogy amit meretnek valasztok a menure...azt szepent automatikusan kozepre helyezi*/
margin-right: auto;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
}
#menu ul {
margin:0;
padding:0;
line-height:30px;
display:inline-block;
border-bottom:solid 3px #289dcb; /*#68bc1d szep zold szint jelent*/
}