將鼠標移開時保持下拉菜單打開？

我在Codeigniter站點和桌面版本中使用zurb基礎4我將登錄右上角作爲下拉菜單，當鼠標從其關閉的下拉菜單的內容移開時，我想知道是否可以保持打開狀態，除非用戶在頁面上的其他位置單擊。將鼠標移開時保持下拉菜單打開？

請看到我所解釋的基礎上的網站文檔的例子：http://foundation.zurb.com/docs/components/top-bar.html

我只是需要讓下拉犯規接近，當鼠標移開編輯該例子。

我使用下面的基本代碼：

<nav class="top-bar"> 
<ul class="title-area"> 
<!-- Title Area --> 
<li class="name"> 
    <h1><a href="test">M450N</a></h1> 
</li> 
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li> 
</ul> 

<section class="top-bar-section"> 
<!-- Left Nav Section --> 
<ul class="left"> 
    <li class="divider"></li> 
    <li class="active"><a href="about">About</a></li> 
    <li class="divider"></li> 
    <li><a href="index">Events</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Music</a></li>  
</ul> 

<!-- Right Nav Section THIS IS THE PROBLEM SECTION --> 
<ul class="right"> 
<li class="divider"></li> 
    <li class="has-dropdown"><a href="#">Login</a> 
    <ul class="dropdown"> 
     <li class="has-dropdown"> 
     <div class="panel"> 
     <input type = "text" value = "Username"/><br /> 
     <input type = "text" value = "Password"/><br /> 
     <input type = "Submit" value = "Login"/></div> 
    </li> 
</ul> 
</section> 
</nav>

基金會CSS： http://pastebin.com/iRpqtY2G

主要CSS：http://pastebin.com/fBExPY1j

來源

2013-05-22 Purgatory

你的問題既不包含CSS或JavaScript，可能是負責你的描述錯誤行爲。請提供更多數據。 –

爲什麼我沒有包括他們的原因是，唯一可以適用的CSS是標準的基礎JavaScript和CSS文件，它不是一個錯誤Itsa徘徊如果我可以添加到我的網站這裏是基礎的CSS文件：[CSS LINK ]（http://pastebin.com/iRpqtY2G）。謝謝。 – Purgatory

請參閱基礎上的示例文檔顯示這是它的標準工作方式，但我想更改它，以便鼠標移開時下拉不會關閉http://foundation.zurb.com/docs/components/ top-bar.html – Purgatory

您可以使用CSS屬性「：積極」，而不是「：hover」

使用

ul.dropdown:active { 
    // css properties 
}

而不是

ul.dropdown:active { 
    // css properties 
}

可能是它幫助：替換：懸停：活躍

.top-bar-section ul li > a:hover { 
.top-bar-section ul li > a.button:hover { 
.top-bar-section ul li > a.button.secondary:hover { 
.top-bar-section ul li > a.button.success:hover { 
.top-bar-section ul li > a.button.alert:hover { 
.top-bar-section li a:not(.button):hover {

要

.top-bar-section ul li > a:hover,.top-bar-section ul li > a:active { 
.top-bar-section ul li > a.button:hover,.top-bar-section ul li > a.button:active { 
.top-bar-section ul li > a.button.secondary:hover,.top-bar-section ul li > a.button.secondary:active { 
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:active { 
.top-bar-section ul li > a.button.alert:hover,.top-bar-section ul li > a.button.alert:active { 
.top-bar-section li a:not(.button):hover,.top-bar-section li a:not(.button):active {

此代碼，可以添加「Onclick」功能也是如此。如果你只想要「點擊」功能，那麼使用下面提線

.top-bar-section ul li > a:active { 
.top-bar-section ul li > a.button:active { 
.top-bar-section ul li > a.button.secondary:active { 
.top-bar-section ul li > a.button.success:active { 
.top-bar-section ul li > a.button.alert:active { 
.top-bar-section li a:not(.button):active {

來源

2013-05-22 13:16:10 suiz

感謝您的迴應，我相信在代碼中應該是'ul.dropdown：hover'正確嗎？然而我無法在基礎CSS中找到這個，我試圖在main.css中創建它來覆蓋它無效這裏是foundation.css代碼，如果你能指點我在正確的方向：[CSS LINK]（ http://pastebin.com/iRpqtY2G）謝謝。 – Purgatory

可能對您有幫助：替換爲：懸停爲：有效 – suiz

對不起，我無法得到上述工作。 – Purgatory

將鼠標移開時保持下拉菜單打開？

回答

相關問題