Горизонтальное бар меню

Подробности

Категория: HTML, CSS, javascript

Создано 15.04.2009 17:53

Обновлено 25.10.2009 12:07

Просмотров: 1308

<div class="moduletable-top">
<ul>
  <li><a>текст 1</a></li>
  <li><a>текст 2</a></li>
  .....
</ul>
</div>

/* верхнее меню */
div .moduletable-top ul
{
padding: 0;
margin: 0;
background:#a1b6e1 url(../images/top-menu-fon.png) no-repeat;
color: White;
float: left;
width: 100%;
}

div .moduletable-top ul li { display: inline; }

div .moduletable-top a:link
, div .moduletable-top a:visited
{
padding: 0.4em 1em;
background-color: #adbfe5;
color: White;
text-decoration: none;
float: right;
border-left: 1px solid #ccccff;
border-top: 1px solid #ccccff;
}

div .moduletable-top a:hover, div .moduletable-top  #current a
{
background-color: #369;
color: #fff;
}

Элементы списка определяем как строковые, чтобы расположить их по горизонтали.

div .moduletable-top ul li { display: inline; }

Чтобы предотвратить схлопывание списка

div .moduletable-top ul
{
...
float: left;
...
}