Center a horizontal navigation bar? - html

Question

How can i center this nav bar so it stays in the center of the screen despite the users resolution setting? Also how to stop the dropdown menu on 'Portfolio' stretching the menu?
http://jsfiddle.net/y4vDC/382/
<ul id="menu">
<li>Home</li>
<li>
About
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
some of the html....

Answer 1

This should get you started. The important thing is that floating makes centering items quite difficult.
display:inline-block works much better as you can center thme list items by applying text-align:center to the parent ul.
Then it's just a case of using positioning to set the location and size of the submenu.
/*Strip the ul of padding and styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
/* center contents of menu */
text-align: center;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
vertical-align: top;
margin-right: 1px;
/* create positioning context */
position: relative;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
/* removed set height */
min-height: 50px;
line-height: 50px;
text-align: center;
font-family: helvetica, arial, sans-serif;
color: #ffffff;
background: #6BD6FA;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #A0A2A3;
color: #ffffff;
}
/*Hover state for dropdown links*/
li ul a:hover {
background: #bada55;
color: #ffffff;
}
/*Hide dropdown menu until are needed*/
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
height: auto;
}
/*Show dropdown menu on hover */
li:hover ul {
display: block;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
}
<ul id="menu">
<li>Home
</li>
<li> About
<ul class="hidden">
<li>Who We Are
</li>
<li>What We Do
</li>
</ul>
</li>
<li>Portfolio
<ul class="hidden">
<li>Web & User Interface Design
</li>
</ul>
</li>
<li>News
</li>
<li>Contacts
</li>
</ul>

Answer 2

/*Strip the ul of padding and styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align:center;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
margin-right: 0px;
}
ul#menu > li{
position:relative;
}
ul > li > ul{
position:absolute;
}
ul > li > ul li{
white-space:nowrap;
}
/*Style for menu links*/
li a {
display: block;
padding:25px 50px;
line-height: 50px;
text-align: center;
font-family: helvetica, arial, sans-serif;
color: #ffffff;
background: #6BD6FA;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a{
background: #A0A2A3;
color: #ffffff;
}
/*Style for dropdown links*/
li:hover a {
background: #A0A2A3;
color: #ffffff;
height: 50px;
line-height: 50px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #A0A2A3;
color: #ffffff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
}
/*Display dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
I updated jsfiddle too: http://jsfiddle.net/y4vDC/385/

Answer 3

try this
ul {
list-style-type: none;
margin: 0 auto;
width:80%;
padding:0;
}