Search the Community

Привет! Есть меню которое при наведении показывает выпадающий список, хочу сделать так, чтобы выпадающий список выпадал плавно, нежно:) Знаю только html+css, желательно решение на этих языках нужно. Я новичок, подскажите пожалуйста нужный код, и куда нужно его вписать. Вот коротко код одного раздела меню: HTML: <nav id="menuVertical"> <ul> <li>Раздел меню<span id="kolichestvo">( 22 )</span> <ul> <li class="test_2">Выпадашка</li> <li class="test_2">Выпадашка</li> <li class="test_2">Выпадашка</li> </ul> </li> </nav><!--menuVertical--> CSS: #menuVertical {width:100%;height:auto; padding:0px; margin-top:0px; margin:0px; } /* блок li */ #menuVertical ul{ display:block; width:350px; margin:0px; padding:0px; list-style:none; position:relative; border-radius: 5px; background:white; height:300px; } /* Управление елементами li */ #menuVertical ul li{ display:block; width:350px; height:30px; position:relative; font-size:16px; color:#6B6B6B; border-bottom:1px solid #8F8F8F; border-top:1px solid #8F8F8F; font-weight:bold; margin-top:10px; background:#FFFFFF; text-align:center; border-radius: 5px; height:35px; padding-top:5px; cursor: pointer; } /* Управление елементами li при наведении */ #menuVertical ul li:hover{ display:block; height:30px; position:relative; font-size:17px; color:white; border-bottom:1px solid #8F8F8F; border-top:1px solid #8F8F8F; padding:0px; height:35px; padding-top:5px; background: #295C79; text-align:center; } /*******Скрывает блок, который должен выпадать ********/ #menuVertical ul li ul{ position:absolute; top:-300px; right:100%;/*поменяли здесь*/ display:none; width:auto; } /*******Выпадающий блок при наведении ********/ #menuVertical ul li:hover ul{ display:block; width:500px; height:1000px; padding-top:0px; margin-right:0px; border:1px solid #F6F6F6; background-color: #F6F6F6; &::-webkit-input-placeholder, &::-moz-placeholder, &:-moz-placeholder, &:-ms-input-placeholder { color: #c0392b; } } /*******Воздействие на елементы с классом .test_2 ********/ #menuVertical ul li ul li.test_2{ white-space:nowrap; text-transform:none; padding:0px; font-size:16px; background:#FFFFFF; border-radius: 5px; font-family:sans-serif; color:#6B6B6B; margin:1px 0 1px 75px; padding-top:4px; text-align:center; } /*******Воздействие на елементы с классом .test_2 ПРИ НАВЕДЕНИИ НА НИХ ********/ #menuVertical ul li ul li.test_2:hover { white-space:nowrap; text-transform:none; font-size:16px; color:black; border-radius: 5px; margin:1px 0 1px 75px; font-family:sans-serif; text-align:center; padding-top:4px; color:white; background: #295C79; }