Выпадающее меню на чистом CSS

Воскресенье, 24 января 2016 14:19

Принцип работы простой, но почему-то я всё чаще сталкиваюсь с тем, что разработчики без надобости используют более сложные решения, работающие по томсму же принципу.

  1. Стиль блока меню с выпадающим списком по умолчанию display:none; . При событии hover (курсор на родительском пункте меню), наш выпадающий список - display:blcok;. Остальное - только оформление.

Вот html разметка:

<ul class="test_menu">
	<li>
		<a href="№">Пункт меню с выпадающим списком</a>
		<ul>
			<li><a href="#">Пункт меню</a></li>
			<li><a href="#">Пункт меню</a></li>
		</ul>
	</li>
	<li><a href="#">Пункт меню</a></li>
	<li><a href="#">Пункт меню</a></li>
</ul> 

Здесь стили нашего меню:

  .test_menu{
  width:300px;
  }
.test_menu li{
	list-style-type:none;
	position:relative;
	z-index:100;
}
.test_menu li a{
	background: #CFCFCF;
	color: #0B3A66;
	text-decoration:none;
	display:block;
	font-size: 15px;
    line-height:38px;
	border-bottom:1px solid #fff;
	padding:0 0 0 10px;
}
.test_menu li a:hover{
	background: #0B3A66;
	color: #fff;
}
.test_menu li ul a{
	background: #F2F2F2;
	color: #0B3A66;
}
.test_menu li.active ul.small a:hover{
	background: #0B3A66;
	color: #fff;
}
.test_menu li ul{
	display:none;
}
.test_menu li:hover ul{
	display:block;
	position:absolute;
	top:0px;
	left:300px;
}
.test_menu li ul li a{
	width:300px;
}

Такой будет результат:

 

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

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Хотите заказать создание сайта?

Создание сайтов в Саранске и других городах России - это основное направление моей деятельности. Если вы решите создать интернет-ресурс, всегда разумно обратиться за помощью к профессионалу. Я предлагаю выгодную стоимость создания любого сайта, и если вы обратитесь ко мне, то получаете качественный ресурс с высокой конверсией.

Если у вас есть вопрос или хотите заказать сайт - заполните форму обратной связи или перезвоните мне. Всегда рад сотрудничеству с Вами!

Расчет стоимости проекта

Заказать сайт

Ваше имя(*) Только русские символы
Ваш email(*) Неверный ввод
Сообщение Только буквы и цифры