将水平导航栏居中？

Question

尽管用户设置了分辨率，如何将导航栏居中放置在屏幕中央？ 另外，如何停止“ Portfolio”上的下拉菜单扩展菜单？

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

这应该使您入门。 重要的是，浮动使居中项非常困难。

display:inline-block效果更好，因为您可以通过将text-align:center应用于父ul来text-align:center列表项text-align:center 。

这只是使用定位来设置子菜单的位置和大小的一种情况。

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

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

我也更新了jsfiddle： http : //jsfiddle.net/y4vDC/385/

Answer 3

尝试这个

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