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

Меню построено на списках, во всех браузерах выглядит одинаково, т.е. кроссбраузерно. Горизонтальное меню Google CSS можно использовать при создании личного блога. Собственно меню сделано точь в точь, как на сайте поисковой системы Google. Там оно находится в верхней части и распространяется на всю ширину экрана. У системы есть и выдвижные списки, в данном примере их нет.Само меню – это темно-серая полоса, выделенные пункты которого обозначаются красным светлым подчеркиванием сверху.

Пример



Код CSS

<style type="text/css"> .tmenu ul { border:0; border-bottom:1px solid #000000; background:#2D2D2D; font-weight:normal; font-size:10pt; font-family:Arial; height:30px; line-height:30px; margin:0; padding:0; padding-left:4px; overflow:hidden; } .tmenu li { list-style-type:none; float:left; } .tmenu a { padding:6px; padding-bottom:7px; color:#CCCCCC; text-decoration:none; } .tmenu a:hover { padding:6px; color:#FFFFFF; padding-top:7px; padding-bottom:8px; text-decoration:none; background:#4C4C4C } .tmenu a.active { border-top:2px solid #DD4B39; padding:6px; padding-top:5px; padding-bottom:7px; color:#FFFFFF; font-weight:bold; text-decoration:none; } .tmenu a.active:hover { border-top:2px solid #DD4B39; padding:6px; padding-top:5px; padding-bottom:7px; color:#FFFFFF; border-top:3px solid #DD4B39; text-decoration:none; background:#4C4C4C } </style>

Код HTML

<div class="tmenu"> <ul> <li><a href="#">+Вы</a></li> <li><a href="#" class="active">Поиск</a></li> <li><a href="#">Картинки</a></li> <li><a href="#">Видео</a></li> </ul> </div>