"Простое" горизонтальное меню

У меня сложности с реализацией меню такого типа (примеры прикрепил)
Может кто-нибудь поделится опытом, как это реализовать, или может кто-нибудь скинет линк на пример?

А что тут сложного... на мой взгляд ничего сверхъестественно тут нет, вопрос просто в усидчивости. Как бы сделал я:

сверстал при помощи таблиц, в фотошопе нарезаются края этих менюшек, т.е. те элементы которые имеют закругления, углубления, в общем не тупо прямые линии.
Так каждый элемент вырезаешь. Геморройно конечно, не спорю, но другого выхода нет, хотя есть... отойти от использования этого дореволюционного дизайнерского хода.

вот бери! Не надо таблиц Не надо вообще ничего!

Это вставь в HTML

Код:

---

<ul class="glossymenu">
****<li class="current">[Only registered and activated users can see links. Click Here To Register...]
****[*][Only registered and activated users can see links. Click Here To Register...]
****[*][Only registered and activated users can see links. Click Here To Register...]****
****[*][Only registered and activated users can see links. Click Here To Register...]****
****[*][Only registered and activated users can see links. Click Here To Register...]****
****[*][Only registered and activated users can see links. Click Here To Register...]****[/list]

---

Это вставь в CSS

Код:

---

.glossymenu{
****position: relative;
****padding: 0 0 0 34px;
****margin: 0 auto 0 auto;
****background: url(media/menur_bg.gif) repeat-x;
****height: 46px;
****list-style: none;
}

.glossymenu li{
****float:left;
}

.glossymenu li a{
****float: left;
****display: block;
****color:#000;
****text-decoration: none;
****font-family: sans-serif;
****font-size: 13px;
****font-weight: bold;
****padding:0 0 0 16px;
****height: 46px;
****line-height: 46px;
****text-align: center;
****cursor: pointer;****
}

.glossymenu li a b{
****float: left;
****display: block;
****padding: 0 24px 0 8px;
}

.glossymenu li.current a, .glossymenu li a:hover{
****color: #fff;
****background: url(media/menur_hover_left.gif) no-repeat;
****background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
****color: #fff;
****background: url(media/menur_hover_right.gif) no-repeat right top;
}

---

Обрати внимание на название картинок! они могут не совпадать с текстом в коде для CSS.

Не поймешь отпишись сюда!

Согласен! Никаких таблиц! Прошлый век! Только css и минимум графики! Вебдваноль!