absolute positioning constrained by parent div width

Question

I am creating a menu with hover-over submenus (just practicing my css) and I've come across a situation I don't understand. I'd like for the submenus to be positioned just below their parent menu item, and have no line breaks within them. The first two submenus behave just as I'd like, but as I move to the right two menu items, their submenus start to get line-breaks, because their width is constrained on the right side by the width of their parent's parent (div.menu-bar). How do I make it so that the submenu's widths are not constrained like this?

Here is a screencast to explain the situation: 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's code is correct, but his explanation doesn't quite make sense to me. In my solution (which is essentially the same as Thiyagesh's), my relative/absolute positioning relationships are the same. The only difference is that I needed to add a width to the submenus. Apparently when you don't specify a width of an absolute-positioned element, its width is defaulted to stay inside the bounds of its first relative-positioned ancestor?

In any case, the solution was just to add "width:375px;" to "div.menu-bar li:hover > ul".

Answer 2

Each inner ul should be absolute to the respective li. Hence the li should be positioned relative for the inner ul.

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

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