Выпадающая информация благодаря Drop-Down Menu
Категория: Скрипты / Дата добавления материала: 14.03.2012, 00:13
|
Шаг 1 - Установим HTML: Code <div class="menu_n"> <a href="#" class="drop">Меню</a> <div class="dd_menu"> <span class="dd_ugol1"></span> <div class="dd_menu_os"> Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой. </div> </div> </div> Шаг 2 - Установим CSS: Code /* Выпадающее меню ------------------------------------------*/ .menu_n { float:left; display:block; position:relative; padding: 4px 8px; background:#afd5eb; border:1px solid #84ABC2; } .menu_n .drop{ font: 11px Verdana,Arial,Helvetica, sans-serif; font-weight: bold; color:#226891; text-shadow:1px 1px 1px #fff; outline:0; }
.menu_n:hover .drop{ color:#2784b4; }
.dd_ugol1, .dd_menu { width:240px; }
.dd_menu { float:left; position:absolute; margin:0px auto; background:#4c4c4c; padding:5px; left:-999em; z-index:998; border:1px solid #111; -moz-border-radius:5px 5px 5px ; -webkit-border-radius:5px 5px 5px ; border-radius:5px 5px 5px ; box-shadow: 0px 0px 5px #111; } .menu_n:hover .dd_menu{ left:auto; right:0px; bottom:30px; }
.dd_ugol1 { height:25px; float:left; position:absolute; bottom: -25px; right: 10px; background:url(/fon_ugol_1.png) no-repeat; background-position: right top; }
.dd_menu_os { overflow:hidden; width:218px; background:#eee; border: 1px solid #353535; margin:0; padding:10px; }
Полезный материал ? Посетите сайт автора: http://center-dm.ru
|
Просмотров: 491 | Загрузок: 123
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи.
[
Регистрация |
Вход ]