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

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

Простой пример реализации выпадающего меню без 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 код:




Постовые:

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

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

Добавить в закладки

]]>

Теги: , юзабилити

июля 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

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