将鼠标移开时保持下拉菜单打开？

Question

我在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

Answer 1

您可以使用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 {