Центрировать горизонтальную навигационную панель?

Question

Как я могу центрировать эту навигационную панель, чтобы она оставалась в центре экрана, несмотря на настройку разрешения пользователей? Также как остановить выпадающее меню на «Портфолио», растягивая меню?

http://jsfiddle.net/y4vDC/382/

<ul id="menu"> 
<li><a href="#">Home</a></li> 
<li> 
    <a href="#">About</a> 
    <ul class="hidden"> 
     <li><a href="#">Who We Are</a></li> 
     <li><a href="#">What We Do</a></li> 
    </ul> 
</li> 

некоторые HTML ....

Answer 1

/*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; 
} 

Я обновил jsfiddle тоже: http://jsfiddle.net/y4vDC/385/

Answer 2

попробовать это

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

Answer 3

Это должно получить ты начал. Важно то, что плавание делает центрирование предметов довольно сложным.

display:inline-block работает намного лучше, так как вы можете центрировать пункты списка, применяя text-align:center к родительскому ul.

Тогда это всего лишь случай использования позиционирования для определения местоположения и размера подменю.

/*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><a href="#">Home</a> 
 
    </li> 
 
    <li> \t <a href="#">About</a> 
 
    <ul class="hidden"> 
 
     <li><a href="#">Who We Are</a> 
 
     </li> 
 
     <li><a href="#">What We Do</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Portfolio</a> 
 

 
    <ul class="hidden"> 
 
     <li><a href="#">Web & User Interface Design</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">News</a> 
 
    </li> 
 
    <li><a href="#">Contacts</a> 
 
    </li> 
 
</ul>