Question

我正在尝试创建一个简单的（看似简单！）居中的水平菜单，该菜单具有居中的下拉菜单，文本对齐明智且居中于父级下方。理想情况下，我希望下拉菜单的宽度与父级相同，但这可能是一步太远了！

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/

获取

所以，正如你所看到的，我将菜单的水平主位置于中心状态，并且我在下拉菜单上有文本对齐，只是它们没有正确地落在父项下面。< /强>

Answer 1

更改

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 & 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 & 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 2

你可以试试这个：

将position:relative添加到父li代码，position:absolute;left:0;分配给子ul

Answer 3

用您的

替换这段代码

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

Answer 4

删除你的浮动：中心。

给你的 nav ul li a position：relative

nav ul li {
  ...
  position:relative
}

和

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

因此，这样您就可以为主导航列表项目提供相对位置。你让他们已经集中了。

在主导航列表项目中，您有子菜单ul。这需要一个左边的绝对位置。因此它在相对容器内部及其位置与父元素完全对齐。

Answer 5

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

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

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

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

其他

Float: center

不起作用 - 请删除

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

请注意以下更改：

您的＆＃39; nav ul li＆＃39;失去了它的浮动：中心并获得了位置：相对，使得孩子的位置绝对是工作。

孩子ul得了左：0;和右：0;属性，因此浏览器将自动居中。并且它获得了宽度：100％以使其足够宽。

Answer 7

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

另外，浮动：中心;是错的。给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/

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

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

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

中心下拉菜单

8 个答案: