中心下拉菜单答案

【问题标题】：Center drop down menu中心下拉菜单
【发布时间】：2015-05-26 13:01:02
【问题描述】：

我正在尝试创建一个简单（看起来很简单！）居中的水平菜单，该菜单具有居中的下拉菜单，文本均对齐并居中位于父级下方。理想情况下，我希望下拉菜单的宽度与父级相同，但这可能有点过分！

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/

因此，如您所见，我将菜单的水平主位居中设置好，并且我在下拉菜单上设置了文本对齐，只是它们没有正确落在父级下方。

【问题讨论】：

请发布您的 HTML，帮助那些试图帮助您的人。
永远记得接受最好的答案，并为那些帮助你的人点赞。不这样做是不礼貌的。

标签： html css drop-down-menu navbar

【解决方案1】：

改变

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

到

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

除上述之外，

我给导航栏中的顶级列表项设置了 255 像素的宽度，与下拉菜单的宽度相同。

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

“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>

【讨论】：

【解决方案2】：

你可以试试这个：

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

【讨论】：

【解决方案3】：

用你的代码替换这段代码

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

【讨论】：

【解决方案4】：

删除你的浮动：中心。

给你 nav ul li a position:relative

nav ul li {
  ...
  position:relative
}

和

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

因此，这样您就可以为您的主导航列表项提供一个相对位置。你已经让它们居中了。

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

【讨论】：

【解决方案5】：

你需要添加相对于你的位置的位置

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

对于你的绝对位置，你需要在下面给它一个左位置示例：

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

附加

Float: center

不起作用 - 请删除

【讨论】：

【解决方案6】：

这将是你的 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，使子 ul 的绝对位置起作用。

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

【讨论】：

【解决方案7】：

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

另外，浮动：中心；是错的。给float: left;

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

【讨论】：

【解决方案8】：

删除所有出现的

float:center
width:255px

添加到你的CSS

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

http://jsfiddle.net/ugLm09e8/

编辑： 添加以下内容以避免在标题很长时堆叠子菜单项

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

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

【讨论】：