我有一個引導式導航欄,我已經改變它,所以下拉式菜單顯示每當一個盤旋在菜單項(而不是每當一次點擊)。這有效,但有些東西沒有關閉:下拉菜單很快並且不規則地消失,只是懸停然後點擊某些東西並不容易。我不確定如何描述這一點,但我認爲你會明白我的意思,一切似乎有點太「快」。Bootstrap - 下拉式菜單消失得太快,無法移動
這裏是一個的jsfiddle: https://jsfiddle.net/r3sjgq2c/
編輯:我在大視口中談論的菜單,不是小視!
下面是代碼:
<div class="header container-fluid">
<div class="row">
<div class="brand col-sm-10 offset-sm-1 hidden-xs-down">
<svg class="brand_logo"><use xlink:href="#brand_logo" /></svg>
</div>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded col-sm-10 offset-sm-1">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Welcome<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown_angebot" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pricing
</a>
<div class="dropdown-menu" aria-labelledby="dropdown_angebot">
<a class="dropdown-item" href="softwareentwicklung.php">Action</a>
<a class="dropdown-item" href="qualitaetssicherung.php">Another action</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com">
Our Company
</a>
<div class="dropdown-menu" >
<a class="dropdown-item" href="geschichte.php">History</a>
<a class="dropdown-item" href="karriere.php">Career</a>
<a class="dropdown-item" href="klienten.php">Clients</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="anfahrt.php">Get here<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="kontakt.php">Contact<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
CSS:
.navbar-toggler{
z-index: 999999 !important;
}
.header {
background-color: blue;
.navbar-toggler {
margin-top: 20px !important;
}
.navbar {
height: 50px !important;
padding: 0 !important;
background-color: yellow !important;
.navbar-nav {
display: table !important;
width: 100% !important;
list-style: none !important;
.nav-link {
padding: 0 !important;
}
li {
display: table-cell !important;
text-align: center !important;
a {
display: block !important;
text-align: center !important;
}
&:first-child a {
text-align: left !important;
}
&:last-child a {
text-align: right !important;
}
&:hover .dropdown-menu, .dropdown-item:hover .dropdown-menu {
display: block !important;
}
.dropdown-menu {
// margin-top: 10px;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
}
}
}
你希望它出現,並與過渡消失,或者你只是有麻煩點擊帳戶它消失的太快的菜單上?因爲我試過了,我沒有麻煩點擊下拉菜單 – mikepa88
。如果您的速度太慢或者嘗試向下垂直移動一點,那麼下拉太快會消失。 –
請參閱我的編輯。我正在談論大視口,而不是關於漢堡包下拉的事情! –