Как превратить это меню в многоуровневое?

Question

Я только что нашел это классное горизонтальное выпадающее меню:

http://css -tricks.com / примеры / DiggHeader / #

И я бы с удовольствием его использовал, но мне нужен многоуровневый. Но не знаю, как это сделать. Я искал учебники о том, как создать многоуровневое меню, но могу найти только загрузки и демонстрационные предварительные просмотры. : -S

Может кто-нибудь предложить какие-либо предложения о том, как сделать меню выше многоуровневого?

Спасибо

Answer 1

Я люблю CSS-трюки, это можно сделать несколькими способами. Вот быстрый пример того, как я предлагаю вам пойти по этому поводу.

HTML MarkUp;

<div id="nav">
  <ul>
    <li>
      <a href="...">Technology</a>
      <ul>
        <li><a href="...">Apple</a>
          <ul>
            <li><a href="...">iPhone</a></li>
          </ul>
        </li>
        <li><a href="...">Design</a></li>
      </ul>
    </li>
  </ul>
</div>

Обратите внимание на <ul> в следующем за <a href="...">Apple</a>.

Метод CSS Only;

<style>
  #nav ul li ul{
    display:none;
  }
  #nav ul li:hover>ul{
    display:block;
  }
</style>

Этот CSS будет скрывать элементы, которые не нужно показывать, пока пользователь не наведет курсор на элемент. тогда покажут при наведении

Этот элемент наведения может быть выполнен в JavaScript, если вы хотите изменить эффект.

Метод jQuery;

<style>
  #nav ul li ul{
    display:none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $("#nav ul li").each(function(){
    $(this).mouseenter(function(){
      $(this).find("ul:first").show();
    }).mouseleave(function(){
      $(this).find("ul:first").hide();
    });
  })
</script>

Answer 2

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