Вертикальное меню
Оно созданно посредством элементарного изменения ширины и высоты элемента списка, при наведении
.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; }