Question

我正在创建一个带有悬停子菜单的菜单（只是练习我的CSS），而且我遇到了一个我不明白的情况。我希望子菜单位于其父菜单项的正下方，并且它们中没有换行符。前两个子菜单的行为与我喜欢的一样，但是当我向右移动两个菜单项时，它们的子菜单开始获得换行符，因为它们的宽度在其右侧被父级的宽度约束＆＃ 39;父母（div.menu-bar）。如何制作以便子菜单的宽度不受此限制？

这是一个解释情况的截屏视频：http://screencast.com/t/0fMjpA0MD

＆＃13;

body {background: #77c4d3; padding:1%; }

div.menu-bar{position: relative; width: 700px;}

/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;} 
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}

/*Menu-specific styles: */
div.menu-bar > ul {width: 100%; text-align: center;}
div.menu-bar > ul > li {width:25%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box;}

/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}

/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul { 
  display: none;
}

/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
  display: block;
  position: absolute;
}

＆＃13;

<div class="menu-bar">
    <ul>
      <li>
        <a href="#home">Home</a>
        <ul>
            <li><a href="#beachouse">Beach House</a></li>
            <li><a href="#skicabin">Ski Cabin</a></li>
            <li><a href="#countrycottage">Country Cottage</a></li> 
        </ul>
      </li
      ><li>
        <a href="#news">News</a>
        <ul>
            <li><a href="#worldnews">World News</a></li>
            <li><a href="#nationalnews">National News</a></li>
            <li><a href="#localnews">Local News</a></li> 
        </ul>
      </li
      ><li>
        <a href="#contact">Contact</a>
        <ul>
            <li><a href="#emailaddress">Email Address</a></li>
            <li><a href="#phonenumber">Phone Number</a></li>
            <li><a href="#postaladdress">Postal Address</a></li> 
        </ul>
      </li
      ><li>
        <a href="#about">About</a>
        <ul>
            <li><a href="#aboutme">About Me</a></li>
            <li><a href="#aboutyou">About You</a></li>
            <li><a href="#aboutus">About Us</a></li> 
        </ul>
      </li>
    </ul>
</div>

＆＃13;

Answer 1

@ Thiyagesh的代码是正确的，但他的解释对我来说并不合理。在我的解决方案中（与Thiyagesh基本相同），我的相对/绝对定位关系是相同的。唯一的区别是我需要在子菜单中添加宽度。显然，当你没有指定绝对定位元素的宽度时，它的宽度默认为保持在其第一个相对位置的祖先的范围内？

在任何情况下，解决方案只是添加＆＃34;宽度：375px;＆＃34; to＆＃34; div.menu-bar li：hover＆gt; UL＆＃34;

Answer 2

每个内部ul应该对各自的li绝对。因此，li应相对于内部ul定位。

＆＃13;

body {
  background: #77c4d3; padding:1%;
}
div.menu-bar{
  position: relative; width: 700px;
}
div.menu-bar ul { 
  list-style-type: none; 
  margin: 0; 
  padding:20px; 
  background: gray;
} 
div.menu-bar li { 
  background:white; 
  text-align:center; 
  display:inline-block; 
  padding:10px;
}
div.menu-bar > ul {
  width: 100%; 
  text-align: center;
}
div.menu-bar > ul > li {
  width:24%; 
  border:0; 
  margin: 0; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  box-sizing: border-box;
}
div.menu-bar ul ul {
  background-color: blue; 
  padding-left: 10px; 
  padding-right: 10px;
}
div.menu-bar li ul { 
  display: none;
  width: 375px;
  position: relative;
}
div.menu-bar li:hover > ul {
  display: block;
  position: absolute;
}

＆＃13;

    <div class="menu-bar">
        <ul>
          <li>
            <a href="#home">Home</a>
            <ul>
                <li><a href="#beachouse">Beach House</a></li>
                <li><a href="#skicabin">Ski Cabin</a></li>
                <li><a href="#countrycottage">Country Cottage</a></li> 
            </ul>
          </li>
          <li>
            <a href="#news">News</a>
            <ul>
                <li><a href="#worldnews">World News</a></li>
                <li><a href="#nationalnews">National News</a></li>
                <li><a href="#localnews">Local News</a></li> 
            </ul>
          </li>
          <li>
            <a href="#contact">Contact</a>
            <ul>
                <li><a href="#emailaddress">Email Address</a></li>
                <li><a href="#phonenumber">Phone Number</a></li>
                <li><a href="#postaladdress">Postal Address</a></li> 
            </ul>
          </li>
          <li>
            <a href="#about">About</a>
            <ul>
                <li><a href="#aboutme">About Me</a></li>
                <li><a href="#aboutyou">About You</a></li>
                <li><a href="#aboutus">About Us</a></li> 
            </ul>
          </li>
        </ul>
    </div>

＆＃13;

绝对定位受父div宽度约束

2 个答案: