html - 受父 div 宽度限制的绝对定位

Question

我正在创建一个带有悬停子菜单的菜单(只是练习我的 CSS)，我遇到了一个我不明白的情况。我希望子菜单位于其父菜单项的正下方，并且其中没有换行符。前两个子菜单的行为与我希望的一样，但是当我移动到右边的两个菜单项时，它们的子菜单开始出现换行符，因为它们的宽度在右侧受到其父项的父项(div)的宽度的限制。菜单栏)。我该怎么做才能使子菜单的宽度不受这样的限制？

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

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

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

Answer 1

@Thiyagesh 的代码是正确的，但他的解释对我来说不太有意义。在我的解决方案中(与 Thiyagesh 的解决方案基本相同)，我的相对/绝对定位关系是相同的。唯一的区别是我需要为子菜单添加宽度。显然，当您不指定绝对定位元素的宽度时，其宽度默认保持在其第一个相对定位祖先的边界内？

无论如何，解决方案就是添加“width:375px;”到“div.menu-bar li:hover > ul”。