Como hago el efecto de desplazamiento en mi menu desplegable css

tengo un menu normal desplegable hecho por CSS, pero quiero que haga el efecto que tiene el menu desplegable de esta web cuando se deplaza hacia bajo las opciones

http://www.tutosytips.com

, me parece que es por jquery, pero no se que tengo que hacer, ayudenme por favor soy nueva en esto.


mi menu tiene el siguiente codigo

<div id="primary-nav" class="clearfix" role="navigation">
<div class="menu-left">
<div class="menu-right clearfix">
<div id="search">
<form action="" id="searchform" method="post" role="search"><div class="clearfix"><input type="text" id="s" name="s" placeholder="Escriba Aquí..." required><input type="submit" value="Buscar" id="searchsubmit"></div></form>
</div>
<div id="dropmenu" class="menu-main-container">

<ul id="menu-main" class="menu">
<li id='menu-item-1047' class='menu-item menu-item-type-post_type'><a href='' class='hp'>nivel 1</a>
<ul class="sub-menu">
<div class="menu-back-right">
</div>
<div class="menu-back">
<li id='menu-item-1142' class='menu-item menu-item-type-taxonomy'><a href=''>nivel 2</a></li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

Efectivamente, esto se puede hecer con jquery.
Lo primero es crear el archivo .js y llamarlo desde el header de tu html (si empleas un CMS lo puedes llamar desde el archivo .php que construye la página).
No te olvides de llamar también a una librería javascript; yo suelo emplear la de google. Simplemente añade esta línea en el header de tu web:

Código :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Una vez que lo tenemos todo, hay que escribir el código de tu archivo.js
Lo primero es ocultar el sub-nivel del menu para hacer el efecto de que aparezca:

Código :

        $(document).ready(function(){
        $("#dropmenu .sub-menu").hide();
         });

Una vez que hemos ocultado el menu secundario, vamos a hacer que al pasar el raton por encima de un elemento del menu, aparezca su menu secundario, simplemente hay que añadir unas líneas al código anterior:

Código :

        $(document).ready(function(){
        $("#dropmenu .sub-menu").hide();
        $("#dropmenu li").mouseover(function(){
        $("ul", this).slideDown("slow");
        });
         });

Con esto creo que te tiene que funcionar (te apareceran los submenus debajo de cada elemento al pasar el raton por encima).
Espero haberte ayudado.

También lo puedes hacer con transiciones de css3.

HtrMancera tiene razón; lo que pasa es que no todos los navegadores soportan css3. Yo, de momento, solo empleo css3 para algunos elementos que no importa que se vean bien en los navegadores viejos.
Tenemos un claro ejemplo en esta misma página; Si vuestro navegador soporta css3 al pasar el raton por encima del logo de cristalab, este hara una pequeña animación girando; pero si vuestro navegador no soporta css3.... no lo podreis ver.
Imagina que el efecto css3 fuera para ver los menus....... pues que la gente con navegadores viejos (que son muuuuuuchos) no podrían navegar por tu web.
Un saludo.

Si el navegador no soporta css3 no se vería la transición, pero el menú igual quedaría con la funcionalidad básica, así que la compatibilidad no sería problema.