Выпадающее меню на CSS - свойство transition

интернет программирование html css веб дизайн

Joomla 1.5, шаблон ja_purity
Есть вертикальное меню, которое я оформил на CSS согласно одной из тем на этом форуме. Собственно, сейчас не могу добиться, чтобы подпункты меню появлялись плавно, а не мгновенно. Знаю, что отвечает за это свойство transition, но куда я его только не ставил - бесполезно, эффект плавного увеличения текста при наведении курсора - работает, эффект плавного появления фона при наведении - работает, а вот плавное выпадание пунктов не работает.


Вот код:

Код:

ul.menu {
position: relative
top: 0px;
left: 0px;
list-style-type: none;
padding:0;
margin:0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
ul.menu li {
list-style-type: none;
padding-left:10px;
padding-right:10px;
padding-bottom:0px;
padding-top:0px;
background-position: right top;
background-repeat: no-repeat;
position:relative;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

ul.menu a {

display: none;
width: auto;
height: auto;
padding: 0 10px;
overflow: auto;
font-family:Verdana;
font-style:bold;
font-size: 14px;
text-transform: inherit;
text-decoration:none;
padding-top:3px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
ul.menu li.active a, ul.menu li a:hover {
color:#E8A03D;
}
ul.menu li a, ul.menu li.active ul li a {
color:#7a7a7a;
}

ul.menu li ul {
display:none;
list-style: none;
top: 0;
width: 280px;
position:absolute;
left: 150px;
font-style:bold;
font-size: 14px;
padding:10px;
margin-bottom:1px;
background-color:white;
border-radius: 7px;
box-shadow: 0.2em 0.2em 3px rgba(122,122,122,0.5);
z-index: 1;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}



ul {
border-radius: 7px;
box-shadow: 0.2em 0.2em 3px rgba(122,122,122,0.5);
}



ul.menu li:hover>ul {
display:block;
transition: all .2s ease-in-out;
}
ul.menu li:hover ul li a{
height:auto;
}

ul.menu li:hover ul li a:hover{
background:#333;
background:rgba(51,51,51,0.75);
text-decoration:underline;
transform:scale(1.05);
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);

}
Ответы:


11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

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

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.