Чтобы не плодить тем, задам вопрос в этой.
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);
}
29.12.2021, 23:15:38