Выпадающее меню на CSS

Категория CSS, HTML

Выпадающее меню на CSSПростой пример реализации выпадающего меню без javascript, чисто на CSS+HTML

Принцип действия: при наведении курсора на заголовок меню, выбирается класс котором есть пункт показа выпадающего меню, то есть display:none превращается в display:block. Посмотреть пример выпадающего меню.

CSS код:

.menu{
font-family:arial, sans-serif;
width:212px;
height:100px;
position:relative;
font-size:11px;
z-index:100
}
.menu ul li a, .menu ul li a:visited{
display:block;
text-decoration:none;
color:#000;
width:104px;
height:20px;
text-align:center;
color:#fff;
border:1px solid #fff;
background:#710069;
line-height:20px;
font-size:11px;
overflow:hidden
}
.menu ul{
padding:0;
margin:0;
list-style:none
}
.menu ul li{
float:left;
position:relative}
.menu ul li ul{
display:none
}
.menu ul li:hover a{
color:#fff;
background:#36f
}
.menu ul li:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px
}
.menu ul li:hover ul li a{
display:block;
background:#ddd;
color:#000
}
.menu ul li:hover ul li a:hover{
background:#6fc;
color:#000
}

HTML код:

<div class="menu">
<ul>
<li><a href="#">Раздел 1</a>
<ul>
<li><a href="#">Страница 1</a></li>
<li><a href="#">Страница 1.1</a></li>
<li><a href="#">Страница 1.2</a></li>
</ul>
<li><a href="#">Раздел 2</a>
<ul>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 2.1</a></li>
<li><a href="#">Страница 2.2</a></li>
<li><a href="#">Страница 2.3</a></li>
<li><a href="#">Страница 2.4</a></li>
<li><a href="#">Страница 2.5</a></li>
</ul>
</li>
</ul>
</div>

Постовые:

  1. как заработать в интернете
  2. прикольные стихи

Другие посты, близкие по теме:

  1. Всплывающие подсказки на CSS
  2. Как привести CSS код к читаемому виду?
  3. Новостной блок своими руками на JavaScript
  4. Развертывание / сворачивание блока с текстом на jQuery
  5. Движение картинки при наведении курсора
]]>

Добавить в закладки
Memori БобрДобр Google Яндекс Твиттер del.icio.us Мистер Вонг МоёМесто MyScoop RuSpace Сто закладок

]]>

Теги: ,

июля 20, 2009

3 комментариев по “Выпадающее меню на CSS”

  1. ]]>mid]]> сказал:
    октября 21, 2009 в 09:12

    Не работает в ИЕ 6 :)

  2. ]]>Taen]]> сказал:
    февраля 27, 2010 в 20:51

    А можно вопрос от дурака?=))
    Можно ли это реализовать с тестом и рисунками (выпадает рисунок с текстом), да еще и в запихнуть=))) ну, очень надо=))

  3. ]]>Taen]]> сказал:
    февраля 27, 2010 в 20:54

    да еще в map (карта) запихнуть
    не напечатался тег первый раз=))

    посмотри jQuery эффекты. При наведении на ссылку развертывается div

Оставьте комментарий: