Ищу простое горизонтальное меню

[Gin]

Здравствуйте.

Кто может подсказать простое горизонтальное меню с гибкой настройкой.

То есть есть прямоуголники в которых находятся текстовые ссылки. Прямоуголники (кнопки) закрашены каким-то цветом. При наведении мышки на этот прямоуголник - цвет меняется и появляетс явозможность кликнуть. При нажатии на этот прямоугольник - его цвет снова меняется и свойства текстовой ссылки тоже меняются (цвет, жирность).

Излазил весь инет...ничего подобного не нащёл. Всё или очень сложные и не во всех браузерах работают, либо есть что-то подобное, но не хватает нескольких элементов выделения.

Знаю, что это делается обычной таблицей и свойствами css, но я плохо в этом разбираюсь. Пожскажите, кому не сложно...

[Smoke]

Посмотри тут:
http://www.google.ru/search?q=css+menu& ... nt=firefox
Может, что понравится...

[Gin]

у них у всех не работает активное выделение. видимо в юкоз с этим загвоздка. я уже десятк меню перебрал

[Gin]

файл стилей

Код: Выделить всё

ul#menu{
   width: 100%;
   height: 43px;
   background: #FFF url("images/menu-bg.gif") top left repeat-x;
   font-size: 0.8em;
   font-family: "Lucida Grande", Verdana, sans-serif;
   font-weight: bold;
   list-style-type: none;
   margin: 0;
   padding: 0;
   }
ul#menu li {
   display: block;
   float: left;
   margin: 0 0 0 5px;
   }
ul#menu li a {
   height: 43px;
   color: #777;
   text-decoration: none;
   display: block;
   float: left;
   line-height: 200%;
   padding: 8px 15px 0;
   }
ul#menu li a:hover {
   color: #333;
   }
ul#menu li a.current{
   color: #FFF;
   background: #FFF url("images/current-bg.gif") top left repeat-x;
   padding: 5px 15px 0;
   }
                   
                   

файл шаблона

Код: Выделить всё

                  <ul id="menu">
<li><a href="#" target="_self" title="sample" class="current">sample</a></li>
<li><a href="#" target="_self" title="sample">sample</a></li>
<li><a href="#" target="_self" title="sample">sample</a></li>
<li><a href="#" target="_self" title="sample">sample</a></li>
<li><a href="#" target="_self" title="sample">sample</a></li>
</ul>
                   

Что здесь надо менять, чтобы в системе укоз работало?

в админке есть надпись "Если вы сами настраиваете дизайн вашего сайта и используете свои таблицы стилей, то вам будет полезно знать, что активный пункт меню имеет класс ma (class="ma")."

Я не понимаю, что она значит и как это переделать...

[Lexx]

ul#menu{
width: 100%;
height: 43px;
background: #FFF url("images/menu-bg.gif") top left repeat-x;
font-size: 0.8em;
font-family: "Lucida Grande", Verdana, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
display: block;
float: left;
margin: 0 0 0 5px;
}
ul#menu li a {
height: 43px;
color: #777;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 8px 15px 0;
}
ul#menu li a:hover {
color: #333;
}
ul#menu li a.current{
color: #FFF;
background: #FFF url("images/current-bg.gif") top left repeat-x;
padding: 5px 15px 0;
}

эти картинки залиты?