Выпадающее меню не могу сделать

Статус
В этой теме нельзя размещать новые ответы.

zaqwsx_

Знаток
Регистрация
29 Авг 2006
Сообщения
227
Реакции
29
Помогите пожалуйста сделать меню, так, чтобы было скругление, не получается добавить в конце скругление, и в начале плавные переходы, получается квадратное меню :( ,или покажите пример, хочется чтобы было вот такое выпадающее меню :

f_4aa4c08ec1ab1.jpg
 
Код в студию. Сорри на форуме телепатов нет.
 
Вот CSS :
.menu{
margin: 0 auto;
min-width: 960px;
max-width: 1500px;
/* padding-left:13%; */
font-family:Verdana, Geneva, sans-serif;
width:960px;
height:100px;
/* position:relative; */
font-size:24px;
z-index:100; /* Основное меню находится ниже подменю */
}
.menu ul li a, .menu ul li a:visited{
display:block; /* При выделении пункта курсором мыши отображается подменю Ссылка как блочный элемент */
text-decoration:none;
color:#000;
width:auto;
height:20px;
text-align:center;
/* color:#fff; */
/* border:1px solid #fff; */
/* background:#710069; */
line-height:20px;
font-size:18px;
overflow:hidden
border-bottom: 1px dashed ; /* Добавляем пунктирную линию под текстом */
height:41px;
line-height:40px;
padding-left:20px;
}
.menu ul{
padding:0;
margin:0;
list-style:none;
}
.menu ul li{
float:left;
position:relative;
border-bottom: 1px dashed ;
margin-left:30px;
}
.menu ul li ul{
display:none;
margin-top:20px; /* отступ вниз после главного меню */
}
.menu ul li ul li{
width: 275px;
margin: 0px;
border-bottom:none;
height:35px; /*!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
.menu ul li:hover a{
color:#fff;
background-image: url(../images/images/menu1.jpg);
background-repeat:no-repeat;
border-bottom: none;
height:41px;
line-height:40px;
padding-left:20px;
width:auto;

}
.menu ul li:hover ul{
display:block;
position:absolute;
top:21px;
left:0;
width:105px;
height: 40px;

}
.menu ul li:hover ul li a{
display:block;
background-image:url(../images/images/menu5off.jpg);
color:#fff;
text-align: left;
padding-left: 20px;
height:35px;
line-height:30px;
font-size:14px;
}
.menu ul li:hover ul li a:hover{
background-image:url(../images/images/menu3on.jpg);
color:#FD5900;
}


А вот HTML :
<div class="menu">
<ul>
<li><a class="hide" href="">О компании</a>
<!--[if lte IE 6]><a href="">Раздел 1<table><tr><td><![endif]-->
<ul>
<li><a href="" title="">Страница 1</a></li>
<li><a href="" title="">Страница 1.1</a></li>
<li><a href="" title="">Страница 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="hide" href="">Услуги и цены</a>
<!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
<ul>
<li><a href="" title="">Страница 2</a></li>
<li><a href="" title="">Страница 2.1</a></li>
<li><a href="" title="">Страница 2.2</a></li>
<li><a href="" title="">Страница 2.3</a></li>
<li><a href="" title="">Страница 2.4</a></li>
<li><a href="" title="">Страница 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="hide" href="">Копилка идей</a>
<!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
<li><a href="" title="">Страница 3.3</a></li>
<li><a href="" title="">Страница 3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="hide" href="">Справка</a>
<!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
<ul>
<li><a href="" title="">Страница 4</a></li>
<li><a href="" title="">Страница 4.1</a></li>
<li><a href="" title="">Страница 4.2</a></li>
<li><a href="" title="">Страница 4.3</a></li>
<li><a href="" title="">Страница 4.4</a></li>
<li><a href="" title="">Страница 4.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="hide" href="">Контакты</a>
<!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
<ul>
<li><a href="" title="">Страница 5</a></li>
<li><a href="" title="">Страница 5.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

Добавлено через 54 секунды
но в коде у меня оно просто обыкновенное выпадающее меню, и больше ничего :(
 
код писать не буду, т.к. свою голову иметь надо, но опишу на словах.
Ссылке при наведении задается фон с закруглениями, дальше выпадающему списку задаются относительные позиции и в него помещается слой или же опять список с абсолютными позициями (закругление в правом верхнем углу). Дальше просто список со ссылками второго уровня. После нижнее закругление. Все просто.
Похожее меню делал сюда

посмотри исходник
 
Visual QuickMenu замутит тебе такую штуку.
 
  • Нравится
Реакции: Onu
Чисто css ты не нарисуешь такое меню, нарезай бэкграунды в gif, а лучше png. И я бы использовал htchover, а то уж больно страшно смотрится:
<!--[if lte IE 6]><a href="">Раздел 2<table><tr><td><![endif]-->
:)
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху