Илья Черепинец
Илья Черепинец
18 Ноябрь, 2015     4 265     1

Многоуровневое вертикальное меню HTML и CSS


На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Прайс</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><a href="#">Услуга 1</a></li>
					<li><a href="#">Услуга 2</a></li>
					<li><a href="#">Услуга 3</a></li>
					<li><a href="#">Услуга 4</a></li>
					<li><a href="#">Услуга 5</a></li>
				</ul>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">Контакты</a></li>
</ul>


Оцените статью:

Оцениваю на 1Оцениваю на 2Оцениваю на 3Оцениваю на 4Оцениваю на 5 4,75 из 5 на основе 4 оценок
Загрузка...

  • Сергій

    Дякую

РУБРИКИ

НОВОЕ

ТОП

dog

Связаться со мной