Есть такой вот вариант. (на okis работает!) Под цвет вашего
http://www.uralopora.ruВ блок "Реклама", под меню вставляете такой html^
Код:
<ul class="menu">
<li><a href="">Главная</a></li>
<li><a href="">О компании</a>
<ul>
<li><a href="primer1.html">Пример1</a></li>
<li><a href="">Клиенты</a></li>
<li><a href="">Для партнеров</a></li>
<li><a href="">Для клиентов</a></li>
<li><a href="">Реклама</a></li>
</ul>
</li>
<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>
</ul>
(1.Названия в пунктах и подпунктах, понятное дело - меняете на свои.
2. В строчках, там где <a href=" вставляете адрес вашей страницы ", ну и так с каждой.
Теперь CSS.
1. Нужно расширить место под меню. В CSS пишите:
Код:
div.art-header {
height: 300px;
}
(300px это я так пробовал у себя. У меня шапка 250 и я увеличил место на 50px.)
2. Вставляете дальше в CSS:
Код:
*{
margin: 0;
padding: 0;
}
body {
margin: 20px;
}
ul.menu {
margin: 0;
padding: 0;
display: inline-block;
background-color: #2b2b2b;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b));
background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b);
background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b);
background-image: -o-linear-gradient(#4f4f4f, #2b2b2b);
background-image: linear-gradient(#4f4f4f, #2b2b2b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0);
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
position: absolute;
top:-45px;
width: 980px;
}
ul.menu li {
float: left;
list-style: none;
border-right: 1px solid #4f4f4f;
position: relative;
}
ul.menu li a {
color: white;
display: block;
font-family: Arial;
font-size: 13px;
padding: 8px 20px 10px;
text-decoration: none;
border-right: 1px solid #2b2b2b;
}
ul.menu li a:hover {
background-color: #2b2b2b;
}
ul.menu li:first-child a:hover {
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
}
ul.menu li ul {
display: none;
}
ul.menu li:hover ul {
display: block;
position: absolute;
top: 34px;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
background-color: #2b2b2b;
z-index: 1000;
}
ul.menu li:hover ul li {
float: none;
width: 150px;
border-right: none;
}
ul.menu li:hover ul li a {
border-top: 1px solid #4f4f4f;
border-right: none;
padding: 6px 20px 8px;
}
ul.menu li:hover ul li a:hover {
background-color: transparent;
color: #c1deff;
}
ul.menu li:hover ul li:first-child a:hover {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
3. Реально, все работает, но нужно повозиться с настройками цифр в CSS/ Ширина под ваш шаблон и т.п.
Ну, пока все)
Пошел спать)))))