VPF::Выпадающие меню со стрелкой - Форум программистов

croex

Дата 17.3.2012, 20:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 20.9.2009

Репутация: нет
Всего: нет

Здравствуйте. Подскажите, как правильно реализовать вот такое двухуровневое меню
user posted image

Загвоздка в треугольнике под меню. Разместить его под меню не проблема, но как сделать, чтобы треугольник не исчезал когда начинаешь выбирать подпункты? Можно это сделать только с помощью css и html?

MagicDew

Дата 19.3.2012, 17:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 16
Регистрация: 12.4.2010

Репутация: нет
Всего: нет

Конечно можно, пример для нормальных браузеров я сделал, а с IE разберетесь сами. Если не получится - пишите.
Вот, собственно, код:

Код


<div id="header">
   <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a><span>&nbsp;</span>
         <ul>
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
         </ul>
      </li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
   </ul>
</div>

Код


#header ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
#header ul li{
    float: left;
    display: inline;
    position: relative;
}
#header ul li a{
    display: block;
    background: #000;
    color: #fff;
    font: bold 12px/24px Arial, Verdana, Tahoma, Sans-serif;
    text-decoration: none;
    padding: 3px 10px;
    margin: 0 1px;
}
#header ul li a:hover{
    text-decoration: underline;
}
#header ul li span{
    display: none;
    top: 35px;
    left: 20px;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #000;
}
#header ul ul{
    display: none;
    position: absolute;
    padding-top: 30px;
}
#header ul ul a{
    width: 50px;
    margin: 1px 0;
}
#header ul li:hover ul,
#header ul li:hover span,
#header ul li:hover span ul{
    display: block;
}

croex

Дата 20.3.2012, 13:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 20.9.2009

Репутация: нет
Всего: нет

Спасибо большое, все именно так, как надо:)

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »