[zaqwsx_]

Помогите пожалуйста сделать меню, так, чтобы было скругление, не получается добавить в конце скругление, и в начале плавные переходы, получается квадратное меню , или покажите пример, хочется чтобы было вот такое выпадающее меню , как во вложении. Пожалуйста, если не сильно тяжело.

Получается только квадратное меню :

<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>

А это кусок 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;
}

[kost]

Как-то делал подобное, вдохновлялся вот этим: http://www.cssplay.co.uk/menus/pro_drop11.html

[Jericho]

Выложи картинки, которые ты вставляешь... без них нет наглядности.... сам код работает нормально!

[Niemans]

есть еще такая версия http://greengeckodesign.com/?q=menumatic

[iDeViL]

если нужно без выезжания, просто чтобы открывались, это легко - при наведении на ссылку присвоить ей новый бг - скругленный, и показать див, в нем таблца - верхушка - переход к ссылке для сливания, середина - подссылки - низ - скругление. Самый простой на мой взгляд способ. Если нужно с анимацией, лучше мне кажется сделать через прозрачность. У меня на сайте в скриптах (пока только если сохранять страницу) есть универсальный скрипт для изменения прозрачности, правда работает пока что только на броузерах с style.opacity (т.е. всех, кроме iexplorer)