Question

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

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

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

我遇到的问题是，当用户在视图窗格中向下时，固定导航距离导航很远。

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

我想知道他们是否能解决这个问题？我已经尝试将li设置为亲戚，但也没有运气。

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

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

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

子位导航菜单，位置：固定

1 个答案: