Sub navigation menu with a position:fixed

Question

I have built a menu for a Pyro CMS site I am building and I am using Bootstrap 3 to build it.

The problem I have is that I need a sub navigation to be 100% width of the screen.

This works if the user hovers over a sub menu item without scrolling anywhere on the page.

The problem I have is that when a user is further down in the view pane, That fixed navigation is sitting quite a way out from the navigation.

I have created an example jsFiddle and if you scroll down in the result box and hover over the navigation you can see the problem I am having.

I am wondering if their is a fix for this? I have tried setting the li to relative but no luck with that either.

My CSS :

nav.nav-large ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}
nav.nav-large li {
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    padding-right: 35px;
    height: 30px;
    width: auto;
}
nav.nav-large li a {
    text-decoration: none;
    color: #000;
    padding-bottom: 15px;
}
nav.nav-large li:hover a {
    background: url(../img/icons/icon-nav-arrow.png) center bottom no-repeat;
}
nav.nav-large li a:hover {
    color: #4e4e4e;
    text-decoration: none;
    background: url(../img/icons/icon-nav-arrow.png) center bottom no-repeat;
}
nav.nav-large li:hover a {
    color: #4e4e4e;
}
nav.nav-large li:last-child {
    border-right: 0;
    padding-right: 0;
}
nav.nav-large li ul.sub-menu {
    display: none;
}
nav.nav-large ul li:hover > ul {
    display: block;
}
nav.nav-large ul ul.sub-menu {
    position: fixed;
    background: #b68854;
    left: 0;
    width: 100%;
    margin-top: 12px;
    z-index: 99999;
    text-align: center;
}
nav.nav-large ul ul.sub-menu ul {
    left: 160px;
    top: 0;
    width: 190px;
}
nav.nav-large ul ul.sub-menu li {
    line-height: 25px;
    display: inline;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 0;
}
nav.nav-large ul ul.sub-menu li a {
    color: #ffffff;
    width: 170px;
    background: none;
}
nav.nav-large ul ul.sub-menu li:hover a {
    background: none;
}
nav.nav-large ul ul.sub-menu li a:hover {
    color: #4e4e4e;
    background: none;
}
ul.sub-navigation {
    float: right;
    list-style: none;
    margin-right: 45px;
    margin-top: 36px;
    padding: 0;
}
ul.sub-navigation li {
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    padding-right: 8px;
    padding-left: 8px;
    border-right: 1px solid #ffffff;
}
ul.sub-navigation li a {
    text-decoration: none;
    color: #ffffff;
}
ul.sub-navigation li a:hover {
    color: #4e4e4e;
    text-decoration: none;
}
ul.sub-navigation li:last-child {
    border-right: 0;
}
.nav-top {
    margin-right: 1%;
    margin-bottom: 10px;
    margin-top: -35px;
}
.nav-top input {
    background: #ececec;
    border-radius: 0;
    height: 25px;
    border: none;
    position: relative;
    z-index: 9999;
}

My HTML:

<nav id="nav-large" class="nav-large text-center">
 <ul>
   <li><a href="/bedrooms">Bedrooms</a>
     <ul class="sub-menu">
        <li><a href="bedrooms/classic-room">Classic Room</a></li>
        <li><a href="bedrooms/superior-room">Superior Room</a></li>
        <li><a href="bedrooms/deluxe-room">Deluxe Room</a></li>
        <li><a href="bedrooms/junior-suite">Junior Suite</a></li>
        <li><a href="bedrooms/the-apartment">The Apartment</a></li>
     </ul>
   </li>
   <li><a href="food-and-drink">Food &amp; Drink</a>
   </li>
   <li><a href="weddings">Weddings</a>
   </li>
   <li><a href="#">Celebrations</a>
   </li>
   <li><a href="#">Gift Vouchers</a>
   </li>
   <li><a href="#">Business</a>
   </li>
   <li><a href="#">Events</a>
   </li>
 </ul>
</nav>

<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>
<p>Page Content</p>

Thanks..

Answer 1

The simple solution is use absolute instead of fixed :

nav.nav-large ul ul.sub-menu {
  position:absolute;
  background: #b68854;
  left: 0;
  width: 100%;
  z-index: 99999;
  text-align: center;
}

Because fixed extract the element and atacht it to the primary container wich is browser window in most cases but absolute atacht the element to his closest parent with a position defined.

The demo http://jsfiddle.net/6Fvz5/5/