[英]Sub navigation menu with a position:fixed
我已經為要構建的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 & 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>
謝謝..
簡單的解決方案是使用absolute
而不是fixed
:
nav.nav-large ul ul.sub-menu {
position:absolute;
background: #b68854;
left: 0;
width: 100%;
z-index: 99999;
text-align: center;
}
因為在大多數情況下,fixed會提取元素並將其到達主要容器,而在大多數情況下是瀏覽器窗口,但是將元素絕對到達其最接近的父對象並定義了位置。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.