html - 位置为 :fixed 的子导航菜单

Question

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

我遇到的问题是我需要一个子导航占屏幕宽度的 100%。

如果用户将鼠标悬停在子菜单项上而不滚动页面上的任何位置，这将起作用。

我遇到的问题是，当用户在 View Pane 中进一步向下时，固定导航与导航相距很远。

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

我想知道他们是否可以解决这个问题？我试过将 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>

谢谢..

Answer 1

简单的解决方案是使用 absolute 而不是 fixed:

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

因为 fixed 提取元素并将其附加到主容器，在大多数情况下是浏览器窗口，但绝对将元素附加到其最近的父级并定义了位置。

演示 http://jsfiddle.net/6Fvz5/5/