Примеры популярных меню

Вертикальное меню

Оно созданно посредством элементарного изменения ширины и высоты элемента списка, при наведении 

					.menu li:hover{
    width:420px;
    height:150px;
}

Но, сначала следует указать изначальный размер элемента списка: 

	.menu li a:first-child{
font-size: 1.1em;
height:50px;
line-height:40px;
position: relative;
text-indent: 36px;
}

Чтобы задать фон перед каждым элементом списка, воспользуемся псевдоэлементом :before 

	.menu li a:first-child:before{
content: '';
position: absolute;
display:block;
height: 32px;
width:32px;
top:9px;
left:9px;
}
.home a:first-child::before {
  background: url(../img/home.png) center no-repeat;
}
.settings a:first-child::before {
  background: url(../img/settings.png) center no-repeat;
}
.link a:first-child::before {
  background: url(../img/link.png) center no-repeat;
}

А также, для изменения фона ссылок нам потребуется это: 

	.menu li a:hover{
background: #435A6B;
}

Горизонтальное меню

  • Home
  • News
    • World
    • Your contry
  • About

Итак, это меню также является ненумерованным списком. Для того, чтобы все элементы списка отображались в строчку, нужно прописать это: 

	Li{
		display: inline-block;
	}

В элементе News есть еще один вложеный список, но изначально его высота равна нулю.

Для того, чтобы при наведении на блок News вложенный в него список увеличивался в размере, нужен этот код: 

	.News:hover .inside{
		height:100px;
		width:190px;
	}