Держите раскрывающееся меню открытым при перемещении мыши?

Я использую zurb Foundation 4 на сайте codeigniter, а в настольной версии у меня есть вход в систему вверху справа в виде раскрывающегося списка, но когда мышь перемещается от содержимого раскрывающегося меню, оно закрывается, я хотел бы знать, если его можно оставить открытым, если пользователь не щелкнет где-нибудь еще на странице.

См. пример того, что я объясняю, в документации веб-сайта фонда: 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


javascript html codeigniter zurb-foundation
person Purgatory    schedule 22.05.2013    source источник
comment
Ваш вопрос не содержит ни css, ни javascript, которые могут быть причиной описанного вами ошибочного поведения. Пожалуйста, предоставьте больше данных.   -  person Maxim Kumpan    schedule 22.05.2013
comment
причина, по которой я не включил их, заключается в том, что единственный css, который может быть применим, - это стандартный базовый файл javascript и css, это не ошибка. Если бы я мог добавить это на свой сайт, вот базовый файл css: CSS-ССЫЛКА. Спасибо.   -  person Purgatory    schedule 22.05.2013
comment
ПОЖАЛУЙСТА, посмотрите пример в документах фонда, показывающий, что это стандартный способ работы, но я хочу изменить его, чтобы раскрывающийся список не закрывался при перемещении мыши foundation.zurb.com/docs/components/top-bar.html   -  person Purgatory    schedule 22.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать свойство CSS ":active" вместо ":hover"

Использовать

ul.dropdown:active {
    // css properties
}

Вместо

ul.dropdown:active {
    // css properties
}

Может быть, это поможет: заменить :hover на :active

.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 {

To

.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». Если вам нужна только функциональность «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 {
person suiz    schedule 22.05.2013
comment
Спасибо за ваш ответ, я считаю, что код должен быть ul.dropdown:hover правильным? однако я не смог найти это в базовом css и попытался создать его в своем main.css, чтобы перезаписать его, но безрезультатно. Вот код Foundation.css, если вы можете указать мне правильное направление: CSS ССЫЛКА Спасибо. - person Purgatory; 22.05.2013
comment
Может быть, это поможет: заменить :hover на :active - person suiz; 23.05.2013