Представляю вашему вниманию очередное горизонтальное меню коричневого цвета, с поиском, выполненное на стилях ксс. Отлично подойдёт практически под любой дизайн.
Установка:
1. Открываем:
Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:
Code
/* === Горизонтальное меню от fotki.ucoz.ua === */
#top_menu{background: #fef9dd url(http://fotki.ucoz.ua/script/primery/hor_menu_1/top_menu_bg.jpg) top center no-repeat; height:42px; margin:0 auto; padding:0 0 10px 0; text-align:center; width:960px;}
#mainlevel-nav{margin:0 auto; height:52px; padding:0;}
#top_menu ul#mainlevel-nav {margin: 0 auto; padding: 0; list-style: none; height:52px; background: transparent url(http://fotki.ucoz.ua/script/primery/hor_menu_1/menu_separator.jpg) top left no-repeat;}
#top_menu ul#mainlevel-nav li{float: left; padding: 0 1px; margin:0; height:52px; background: transparent url(http://fotki.ucoz.ua/script/primery/hor_menu_1/menu_separator.jpg) top right no-repeat;}
#top_menu ul#mainlevel-nav li a, #top_menu ul#mainlevel-nav li a:visited{float:left; color:#eee9ca; display:block; font-family:Tahoma,Arial,sans-serif; font-size:14px; font-weight:bold; text-decoration:none; height:52px; line-height:43px; padding:0 25px;}
#top_menu ul#mainlevel-nav li a:hover{background: transparent url(http://fotki.ucoz.ua/script/primery/hor_menu_1/but_hover.jpg) bottom center repeat-x; color: #b27b49; text-decoration: none; height: 52px;}
.clr {clear: both; font-size:0; line-height:0;}
.reset, .reset li { list-style: none; padding: 0; margin: 0; }
.searchbar {margin-top: 8px; border: 1px solid #3f464c; border-width: 0 1px 1px 0; float: right; width: 150px; height: 26px; background: #191f24 url("http://fotki.ucoz.ua/script/primery/hor_menu_1/search.jpg") no-repeat;}
.searchbar li {float: left; height: 26px;}
.searchbar .lfield {width: 150px; padding-left: 2px; padding-right: 2px; overflow: hidden;}
.searchbar .lfield input {text-align: right; font-style: italic; color: #8b99a8; height: 15px; width: 140px; border: 0 none; background: none; margin-top: 6px;}
/* =============== */
2. Этот код вставляется туда, где должно быть наше меню, обычно это:
Панель управления ---> Управление дизайном ---> Глобальные блоки ---> Верхняя часть сайта, в самый низ:
Quote
<div id="top_menu">
<div style="margin:0 auto;float:left;">
<tr><td><ul id="mainlevel-nav">
<li><a href="Адрес страницы 1" class="mainlevel-nav">Страница 1</a></li>
<li><a href="Адрес страницы 2" class="mainlevel-nav">Страница 2</a></li>
<li><a href="Адрес страницы 3" class="mainlevel-nav">Страница 3</a></li>
<li><a href="Адрес страницы 4" class="mainlevel-nav">Страница 4</a></li>
<li><a href="Адрес страницы 5" class="mainlevel-nav">Страница 5</a></li>
</ul>
</div>
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0; padding-right: 17px;" action="/search/">
<ul class="searchbar reset">
<li class="lfield"><input type="text" name="q" onBlur="if(this.value=='') this.value='поиск...';" onFocus="if(this.value=='поиск...') this.value='';" value="поиск..."/></li>
</form>
<div class="clr"></div></div>
Не забываем заменить адреса и имена ссылок пунктов меню на свои.