Cherepynets Illia
18 ноября, 2015     15 181     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,44 из 5 на основе 9 оценок
Загрузка...

РУБРИКИ

НОВОЕ

ТОП

SEO
Регион: New York, NY


SEO Specialist
Регион: Remote


SEO Manager
Регион: New York, NY


SEO Specialist
Регион: Milford, MA


Head of SEO
Регион: Oregon State


SEO Manager
Регион: Phoenix, AZ


Principal of SEO
Регион: Germany


SEO Strategist
Регион: Bristol, PA


SEO Manager
Регион: Los Angeles, CA


SEO Analyst
Регион: New York, NY


SEO Manager
Регион: Remote


SEO Manager
Регион: New York, NY


SEO Specialist
Регион: Austin, TX


SEO Specialist
Регион: San Diego, CA


SEO Analyst
Регион: Phoenix, AZ


SEO Intern
Регион: Atlanta, GA


SEO Strategist
Регион: Chicago, IL


SEO Lead
Регион: Remote


SEO Manager
Регион: San Francisco, CA


SEO Consultant
Регион: New York, NY