Html 带位置的子导航菜单：固定

我已经为我正在构建的Pyro CMS站点构建了一个菜单，我正在使用Bootstrap 3来构建它

我的问题是，我需要一个子导航是100%的屏幕宽度

如果用户将鼠标悬停在子菜单项上，而不滚动页面上的任何位置，则此操作有效

我的问题是，当用户在视图窗格中的位置较低时，固定导航与导航的位置相差很远

我已经创建了一个示例，如果您在结果框中向下滚动并将鼠标悬停在导航上，您可以看到我遇到的问题

我想知道他们是否能解决这个问题？我已经试着将li设置为relative，但也没有成功

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

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

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

页面内容

---

谢谢。

简单的解决方案是使用

绝对

而不是

固定

：

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

因为修复了提取元素并将其转移到主容器的问题，在大多数情况下，主容器是浏览器窗口，但绝对转移将元素转移到定义了位置的最近父容器

---

演示

感谢@Danko格式化我的HTML:）