[英]Bootstrap dropdown menu a:hover not full li:hover
懸停在“a”上時切換二級下拉菜單顯示的最佳方法是什么……而不是懸停在完整的“li”上?
我使用引導程序和小提琴是: http : //jsfiddle.net/2Smgv/3100/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Action</a></li>
</li>
</ul>
</li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
我最初不明白你的問題,並更新了我的“答案”:
無法完成您請求的修改,因為懸停會被破壞。 子列表項的顯示和鼠標懸停的能力起作用,因為這些項在父列表中。 如果您將懸停更改為錨標記,則一旦您嘗試使用子導航中的鏈接,您將位於錨標記之外,從而消除懸停效果。
如果你看看你的標記,
但是,包含的“2 級下拉菜單”以該文本結尾,將光標移到同級子菜單上意味着您不再將鼠標懸停在 .
我希望這可以解釋為什么這是不可能的,並讓您了解原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.