Простое css меню

Сегодня рассмотрим самое простое меню, основанное на стилях css. Идея выдрана давно из какого-то цветастого шаблона, название уже не помню.


Для начала мосмотрим на него:

• Пункт меню1
• Пункт меню2
• Пункт меню3
• Пункт меню4

И место ему, как мне кажется, вот там (относительно положения на странице):

А теперь пошагово.

Блок подключения:

<div id="navBar">
<ul>
<li><a href="">Пункт меню1</a></li>
<li><a href="">Пункт меню2</a></li>
<li><a href="">Пункт меню3</a></li>
<li><a href="">Пункт меню4</a></li>
</ul>
</div>

Пояснение:
в href="" между кавычек подставляем url страницы.

Стили:

<style>
div#navBar {
padding: 0px 0px 0px 21px;
height: 44px;
margin: 0px;
#position: absolute;
top: -50;
right: 0px;
}
div#navBar ul {
background: url(http://4.bp.blogspot.com/_k_DnmK4oz2Q/Sz1J055FalI/AAAAAAAAAOs/xJFqNEG1Agc/s1600/nav_right.png) repeat-x top center;
padding: 0px 0px 0px 21px;
list-style-type: none;
margin: 0px;
height: 44px;
}
div#navBar ul li {
display: block;
padding: 0px;
float: left;
height: 44px;
width: auto;
margin: 0px 7px;
}
div#navBar ul li a:link, div#navBar ul li a:visited {
display: block;
float: left;
width: auto;
height: 34px;
padding: 10px 8px 0px 8px;
color: #655879;
font-family: Cambria, "Times New Roman", serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
div#navBar ul li a:hover {
display: block;
text-decoration: none;
color: #8e80a2;
}
</style>

Тонкости:
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4jPaGjmZxsO9GXVqnovIXYhqEDGNj5HxDi0A8pWA-Swyfv8qkQQO9JEzDO6aTb8Pg1lEcCThyphenhyphenxkYjLEVYEvkQdJBxq9ehT7HzK_EEuQN5cG9F781SvXvHpy78OdrgOtJ47Eyf3tMlUQ/s1600/nav_right.png) - графическая подложка
position: absolute;top: -50; right: 0px; - регилируем позицию

Больше пояснять нечего, подкрутить цвета и размеры - предмет самостоятельной работы :).

Продолжение следует...