[Table]html[/Table]
Code
<div class="main_menu">
<ul class="menu">
<li class="selected"><a href="#">Главная</a></li></h3>
<li><a href="#">Уроки</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Магазин</a></li>
<li><a href="#">Партфолио</a></li>
<li><a href="#">Контакты</a></li>
<li class="rss"><a href="#">RSS</a></li>
</ul>
</div>
[Table]А теперь необходимо оформить наше меню для его более красивого отображения, для этого пропишем CSS стили:
css[/Table]
Code
/* Глобальные стили */
* {
margin: 0;
padding: 0;
}
/* Стили главного, внешнего блока меню */
.main_menu {
width: 100%;
height: 239px;
background: url(img/menu_bg.gif) repeat-x;
}
/* Слити внутреннего блока меню */
.menu {
margin-left: 20px;
list-style-type: none;
float: right;
}
.menu li {
display: inline-block;
}
/* Слити внутренних блоков меню */
.menu a, .selected a, .rss a{
width: 77px;
height: 30px;
display: block;
padding: 50px 0 0 0;
background: url(img/link/link.png) no-repeat;
font: 11px Verdana, Geneva, sans-serif;
text-decoration: none;
text-align: center;
color: #FFF;
}
.menu a:hover {
background: url(img/link/link_hover.png) no-repeat;
color: #CCC;
}
.rss a {
width: 55px;
display: block;
margin: 0 20px 0 0;
background: url(img/rss/rss.png) no-repeat;
}
.rss a:hover {
background: url(img/rss/rss_hover.png) no-repeat;
}
.selected a,.selected a:hover {
background: url(img/link/link_selected.png) no-repeat;
}
