CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

6

Простое выпадающее меню на CSS3

Jemand 25345 ,
CSS3

1. CSS

a, a:visited {
	color: #464530;
	text-decoration: none;
}
.drop-menu {
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	padding: 10px 10px;
	font-size: 22px;
	height: 25px;
	max-height: 25px;
	width: 400px;
	background: #fff;
	cursor: pointer;
	font-family: Georgia, Arial;
	border: 1px solid #f6f0e4;
	-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.plus2 {
	display: inline-block;
	padding-right: 10px;
	font-weight: bold;
	font-size: 12px;
	}
.plus {
	display: inline-block;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
  	-o-transition: .3s ease-in-out;
	}
.drop-menu:hover {
	border: 1px solid #fff;
	}
.drop-menu:hover .sub-menu {
	display: inline-block;
	}
.drop-menu:hover .plus {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	}
.sub-menu {
	display: none;
	width: 400px;
	background: #fff;
	padding: 10px 10px;
	margin-left: -11px;
	margin-top: 10px;
	border: 1px solid #fff;
	-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
	}
.sub-menu li {
	list-style-type: none;
	display: block;
	border-bottom: 1px dotted #eaeaea;
	font-size: 19px;
	height: 22px;
	padding: 8px 0;
	}
.sub-menu li img {
	margin-right: .5em;
	}
.sub-menu li:hover {
	border-bottom: 1px dotted #bababa;
	}

2. HTML

<div class="drop-menu">
	<span class="plus">+</span>   Наведите курсор мыши сюда!
	<ul class="sub-menu">
		<li><a href="http://jemand.ru"><span class="plus2">+</span>Главная</a></li>
		<li><a href="http://jemand.ru/rubric/html/"><span class="plus2">+</span>HTML</a></li>
		<li><a href="http://web-forum.ws"><span class="plus2">+</span>Форум</a></li>
		<li><a href="http://jemand.ru/rubric/css/"><span class="plus2">+</span>CSS</a></li>
		<li><a href="http://jemand.ru/rubric/css3/"><span class="plus2">+</span>CSS3</a></li>
	</ul>
</div>

Демо

Рекламная пауза

» 6 комментариев

  1. Демонстрация отвалилась. А так – спасибо!

  2. отлично забрал себе,только в демо у меня-при наведении меню открывается но не успев перескочить на ссылки-оно закрывается,и так через раз)

  3. куда вписать z-index ?


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