中心下拉菜单

Question

我正在尝试创建一个简单的（看似简单！）居中的水平菜单，其中有居中的下拉菜单，文本都明智地对齐并在 parent 下居中。理想情况下，我希望下拉菜单的宽度与 parent 相同，但这可能太过分了一步！

nav {
  font-family: "bell mt";
  text-align: center;
}
nav ul {
  float: center;
  display: inline-block;
}
nav ul li {
  float: center;
  display: inline-block;
  margin: 0;
  padding: 0;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 10px 30px;
  color: #3c3c3b;
  text-decoration: none;
}
nav ul li:hover a {
  color: #a7cc74;
  text-decoration: none;
}
nav ul li ul {
  position: absolute;
  width: 255px;
  background: #fff;
  margin: 0;
  padding: 0;
}
nav ul li ul li {
  margin: 0;
  width: 255px;
}
nav ul li ul.sub-menu li a,
nav ul li ul li a:visited {
  display: inline-block;
  padding: 10px;
  color: #fff;
  margin: 0;
  background: #fff;
  color: #3c3c3b;
  text-align: center;
}
nav ul li ul li:hover a {
  background: #fff;
  color: #a7cc74;
}
nav ul li ul.sub-menu {
  display: none;
  z-index: 9999
}
nav ul li:hover ul.sub-menu {
  display: inline-block;
}

<nav class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6"><a href="#">THE HOLIDAY VILLAS</a>
      <ul class="sub-menu">
        <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://79.170.44.75/casadellequerce.com/casa-delle-querce/">CASA DELLE QUERCE</a>
        </li>
        <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://79.170.44.75/casadellequerce.com/frontone-holiday-villa/">FRONTONE</a>
        </li>
        <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://79.170.44.75/casadellequerce.com/montevecchio-holiday-villa/">MONTEVECCHIO</a>
        </li>
        <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://79.170.44.75/casadellequerce.com/how-to-get-there/">HOW TO GET THERE</a>
        </li>
        <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://79.170.44.75/casadellequerce.com/gallery/">GALLERY</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-7"><a href="#">DISCOVER ITALY</a>
      <ul class="sub-menu">
        <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://79.170.44.75/casadellequerce.com/about-the-area/">ABOUT THE AREA</a>
        </li>
        <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://79.170.44.75/casadellequerce.com/eating-and-drinking-in-frontone/">EATING OUT</a>
        </li>
        <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://79.170.44.75/casadellequerce.com/things-to-do/">THINGS TO DO</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-98"><a href="#">AVAILABILTY &amp; PRICING</a>
      <ul class="sub-menu">
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://79.170.44.75/casadellequerce.com/availability-and-pricing/">AVAILABILTY &amp; PRICING</a>
        </li>
        <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://79.170.44.75/casadellequerce.com/testimonials/">TESTIMONIALS</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://79.170.44.75/casadellequerce.com/contact-us/">CONTACT US</a>
    </li>
  </ul>

更详细的视图也可在 http://79.170.44.75/casadellequerce.com/

获得

因此，如您所见，我将菜单的水平主位居中，并且下拉菜单中的 text-align 正常，只是它们没有掉落在 parent 下方正确。

Answer 1

你可以试试这个：

将 position:relative 添加到父 li 标记并 position:absolute;left:0; 分配给子 ul

Answer 2

用您的代码替换这段代码

nav ul li:hover ul.sub-menu{
  display: -webkit-box;
}

Answer 3

删除你的float:center。

给你的 nav ul li a position:relative

nav ul li {
  ...
  position:relative
}

和

nav ul li ul {
  position: absolute;
  left: 0;
}

因此，您可以通过这种方式为主导航列表项指定一个相对位置。你让他们已经居中。

在您的主导航列表项中，您有子菜单 ul 。这需要一个左边为 0 的绝对位置。所以它在相对容器内，然后它的位置与父元素完全对齐。

Answer 4

您需要添加相对于您的 li 的位置

    nav ul li {
  float: center;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}

对于你的位置 absolute ul 你需要给它一个左边的位置例子如下：

nav ul li ul {
  position: absolute;
  width: 255px;
  background: #fff;
  margin: 0;
  padding: 0;
  left: 0px;
}

额外

Float: center

不起作用 - 请删除

Answer 5

这将是你的 CSS:

nav {
    font-family: "bell mt";
    text-align: center;
}

nav ul {
    float: center;
    display: inline-block;
}
nav ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
}
nav ul li a, nav ul li a:visited {
    display: block;
    padding: 10px 30px;
    color: #3c3c3b;
    text-decoration: none;
}
nav ul li:hover a {
    color: #a7cc74;
    text-decoration: none;
}
nav ul li ul {
    position: absolute;
    width: 255px;
    background: #fff;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    width: 100%;
}
nav ul li ul li {
    margin: 0;
    width: 255px;
}
nav ul li ul.sub-menu li a, nav ul li ul li a:visited {
    display: inline-block;
    padding: 10px;
    color: #fff;
    margin: 0;
    background: #fff;
    color: #3c3c3b;
    text-align: center;
}
nav ul li ul li:hover a {
    background: #fff;
    color: #a7cc74;
}
nav ul li ul.sub-menu {
    display: none;
    z-index: 9999
}
nav ul li:hover ul.sub-menu {
    display: inline-block;
}

注意以下变化：

您的 'nav ul li' 失去了它的 float: center 并获得了 position: relative，使 child ul 的绝对位置起作用。

child ul 获得了一个left: 0;右：0；属性，所以浏览器会自动居中。它获得了宽度：100% 以使其足够宽。

Answer 6

改变

nav ul li:hover ul.sub-menu {
  display: inline-block;
}

到

nav ul li:hover ul.sub-menu {
  display: block;
}

除以上外，

我已将导航栏中顶级列表项的宽度设置为 255px，即与下拉菜单的宽度相同。

我还添加了额外的边框，以便您可以看到对齐方式，它们没有实际用途，应该被忽略。

"center" 不是 float 属性的有效值。

演示：

nav {
  font-family: "bell mt";
  text-align: center;
}
nav ul {
  /*float:center*/
  display: inline-block;
}
nav ul li {
  /*float:center*/
  display: inline-block;
  margin: 0;
  padding: 0;
  border: solid; /*it's there so that changes are visible, ignore*/
  width: 255px; /*same width for dropdown item and dropdown menu list*/
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 10px 30px;
  color: #3c3c3b;
  text-decoration: none;
}
nav ul li:hover a {
  color: #a7cc74;
  text-decoration: none;
}
nav ul li ul {
  position: absolute;
  width: 255px;
  background: #fff;
  margin: 0;
  padding: 0;
}
nav ul li ul li {
  margin: 0;
  width: 255px;
}
nav ul li ul.sub-menu li a,
nav ul li ul li a:visited {
  display: inline-block;
  padding: 10px;
  color: #fff;
  margin: 0;
  background: #fff;
  color: #3c3c3b;
  text-align: center;
}
nav ul li ul li:hover a {
  background: #fff;
  color: #a7cc74;
}
nav ul li ul.sub-menu {
  display: none;
  z-index: 9999
}
nav ul li:hover ul.sub-menu {
  display: block;
  margin-left: -3px; /* adjusts for the border, ignore*/
}

<nav class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6"><a href="#">THE HOLIDAY VILLAS</a>
      <ul class="sub-menu">
        <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"><a href="http://79.170.44.75/casadellequerce.com/casa-delle-querce/">CASA DELLE QUERCE</a>
        </li>
        <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://79.170.44.75/casadellequerce.com/frontone-holiday-villa/">FRONTONE</a>
        </li>
        <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://79.170.44.75/casadellequerce.com/montevecchio-holiday-villa/">MONTEVECCHIO</a>
        </li>
        <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://79.170.44.75/casadellequerce.com/how-to-get-there/">HOW TO GET THERE</a>
        </li>
        <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://79.170.44.75/casadellequerce.com/gallery/">GALLERY</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-7"><a href="#">DISCOVER ITALY</a>
      <ul class="sub-menu">
        <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="http://79.170.44.75/casadellequerce.com/about-the-area/">ABOUT THE AREA</a>
        </li>
        <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://79.170.44.75/casadellequerce.com/eating-and-drinking-in-frontone/">EATING OUT</a>
        </li>
        <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://79.170.44.75/casadellequerce.com/things-to-do/">THINGS TO DO</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-98"><a href="#">AVAILABILTY &amp; PRICING</a>
      <ul class="sub-menu">
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://79.170.44.75/casadellequerce.com/availability-and-pricing/">AVAILABILTY &amp; PRICING</a>
        </li>
        <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://79.170.44.75/casadellequerce.com/testimonials/">TESTIMONIALS</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://79.170.44.75/casadellequerce.com/contact-us/">CONTACT US</a>
    </li>
  </ul>
</nav>

Answer 7

nav ul li { - 在此处添加相对位置。

另外，float: center;是错的。给float: left;

nav ul li ul { - 这里缺少 left。给left:0;

Answer 8

删除所有出现的

float:center
width:255px

添加到您的css

nav ul li { position: relative; }
nav ul li ul { left: 0; }

http://jsfiddle.net/ugLm09e8/

编辑： 添加以下内容以避免在您有很长的 headers

时堆叠子菜单项

nav ul li ul li { display:block; }
nav ul li ul.sub-menu { width:100%; }

http://jsfiddle.net/ugLm09e8/2/

中心下拉菜单

Center drop down menu

html

css

navbar

drop-down-menu