Держите подменю при перемещении мыши

0

Я хочу создать меню (с подменю и div, содержащим ссылку для каждого подменю при наведении).

Что-то вроде этого:

AAAA | BBBB
     | bbb1
     | bbb2   HERE IS MOUSE (bbb2 LINK)
     | bbb3

Можно ли показывать подменю при попытке открыть ссылку? Если вы переместите мышь с "bbb2", ссылка исчезнет.

что у меня есть сейчас: http://i.imgur.com/vhFtaQc.png
и что я хочу: http://i.imgur.com/BOQNMat.png

Вот JSFiddle: http://jsfiddle.net/zu8Eu/

Надеюсь ты понимаешь. Благодарю!

  • 0
    Измените ваш HTML (и CSS) так, чтобы ссылки были <li> элементов <li> .
  • 0
    @Blazemonger Разве это не легко, ты пробовал с скрипкой, которую он предоставляет? jsfiddle.net/zu8Eu/6
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ

Как уже отмечалось, вам может понадобиться вложенный <div> элемент li. Но для сохранения hover() вы можете использовать padding для установки пробела:

HTML

<li id="submenu1">
  <a href="#" title="submenu1">aaaa1</a>
  <div class="one">
    <a href="1.html">Link for aaa1</a>
  </div>
</li>

CSS

.one {
display: none;
position: absolute;
top: 0px;
left:100%;
}

Демо-версия http://jsfiddle.net/zu8Eu/27/

Поделиться
  • 0
    Большое спасибо! Я перепробовал каждую скрипку, которую ты спас.
  • 0
    Рад помочь тебе, приятель
1

Я уверен, что это плагины jQuery, которые предоставят вам то, что вы хотите достичь, но я бы сказал, что вы реструктурируете свой HTML и правильно встраиваете элементы.

<ul>
    <li><a href="#">Menu 1</a>
        <ul>
            <li>
                <a href="#">Submenu 1</a>
                <ul>
                    <li>
                        <a href="#">Subsub menu</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Таким образом, вы можете использовать CSS для достижения того, чего хотите:

ul li ul{
  display: none;
}
ul li:hover > ul{
  display: block;
}
ul li ul li:hover > ul{
  display: block;
}

Как только вы наведите курсор на первый li, он покажет прямую дочернюю ul, если вы наведите курсор на эту улицу, она все равно будет считаться парой на первом ли, что означает, что она все равно будет видна.

Скрипт: http://jsfiddle.net/x54gZ/

Поделиться
  • 0
    @Danko - Моя скрипка настолько проста, насколько это возможно, он должен быть в состоянии прочитать ее и изменить свой код. Вместо того, чтобы кто-то другой давал ему код, он мог бы даже кое-что узнать из своего вопроса.
  • 0
    да, это хороший подход, но если вы примените это к его скрипке, вы увидите, что это не полное решение ... jsfiddle.net/zu8Eu/6, если блок имеет абсолютную позицию, но не рядом с пробелом между не считается li
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню