Меню аккордион

<style> [id="accordionmytorrnadocom"] > [class="accordionmytorrnadocom"] { width: 300px; height: 30px; overflow: hidden; transition: height ease-in-out 500ms; -o-transition: height ease-in-out 500ms; -moz-transition: height ease-in-out 500ms; -webkit-transition: height ease-in-out 500ms; border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 2px; } #accordionmytorrnadocom h3 { display: block; height: 30px; line-height: 20px; margin: 0px 0px 5px 0px; background: #e6e6e6; padding: 5px; } #accordionmytorrnadocom h3 > a { color: #1e1e1e; text-decoration: none; } #accordionmytorrnadocom p { height: 150px; padding: 5px; } #accordionmytorrnadocom li { list-style:none; float:left; } #accordionmytorrnadocom li a { padding: 5px; color:3D3D3D; text-decoration:none !important; } #accordionmytorrnadocom li a:hover:before { content: "►"; padding-right:5px; color:red; } #accordionmytorrnadocom div:hover {height: 180px;} #accordionmytorrnadocom div:hover h3 { border-bottom: 1px solid #ccc; font-weight: bold; } </style> <div id="accordionmytorrnadocom"> <div class="accordionmytorrnadocom"> <h3><a href="#">Аккордион</a></h3> <p>Меню <span style="color:red;">accordion</span> для сайта. Облегчённый вариант с эффектом замедленного раскрытия.</p> </div> <div class="accordionmytorrnadocom"> <h3>Настройки Accordion</h3> <p>В меню регулируется всё, цвета, размеры и время замедления при открытии. Можно использовать заголовок как ссылку для перехода, можно без ссылки.</p> </div> <div class="accordionmytorrnadocom"> <h3>Применение Accordion</h3> <p>Применяться может для чего угодно, даже как вид материалов сайта uCoz, тогда здесь будет краткое описание.</p> </div> <div class="accordionmytorrnadocom"><h3>Ссылки Accordion</h3> <li> <a href="http://www.mytorrento.ru/portal.php"> Mytorrento.ru </a> </li> <li> <a href="http://www.mytorrento.ru/portal.php"> Быстрый торрент трекер </a> </li> <li> <a href="http://www.mytorrento.ru/portal.php"> Качай и не заботься о скорости </a> </li> <li> <a href="#">Меню Аккордион</a> </li> </div> </div>