Script de menú deslizable.

Hola, CCTW, soy bastante nuevo en esto, seguí todos los cursos pero sin embargo, no logro entender como crear un menú deslizable, a ver si me explico, como el de esta web de uno de los users de acá:

Acá para ir

Es que realmente lo necesito, me encantaría que mi menú fuera así de dinámico, no puedo darles ningún código (ni tampoco creo que lo necesiten :p) porque mi web todavía está siendo planeada.

Gracias desde ya.

Hola, ¿revisaste el código fuente del sitio? Eso se hace a través de estilos (CSS) y HTML. Este es el código fuente del menú de ese sitio:

<div id="topnav">
      <ul>
        <li class="active"><a href="index.html">Inicio</a></li>
        <li><a href="tutoriales.html">Tutoriales</a>
		<ul>
            <li><a href="html.html">HTML</a></li>

            <li><a href="css.html">CSS</a></li>
            <li><a href="dreamweaver.html">Dreamweaver</a></li>
			<li><a href="crearforo.html">Crear foro</a></li>
			<li><a href="creartopsite.html">Crear un topsite</a></li>
			<li><a href="disenografico.html">Diseño grafico</a></li>
          </ul>

        </li>
        <li><a href="hostingydominio.html">Hosting y dominio </a>
		<ul>
            <li><a href="hosting.html">Hosting</a></li>
            <li><a href="dominios.html">Dominios</a></li>
          </ul>
        </li>

        <li><a href="recursos.html">Recursos</a>
          <ul>
            <li><a href="botones.html">Botones</a></li>
            <li><a href="codigos.html">Códigos</a></li>
            <li><a href="elementos.html">Elementos</a></li>
			<li><a href="plantillas.html">Plantillas</a></li>

          </ul>
        </li>
        <li class="last"><a href="http://www.comocrearwebs.zobyhost.com/phpBB3/index.php" target="_blank">Foro</a></li>
      </ul>
    </div>

Si quieres más información, lo mas simple es que instales Firebug en Firefox y revises el código fuente y los estilos CSS con este plugin.

También puedes usar el Inspeccionar elemento de google chrome :D

PD: No he tardado más de 5 segundos en encontrar muchísimas vulnerabilidades XSS en esa web, para que veais lo bueno que es el dreamwever en cuanto a seguridad xD

Ah, muchas gracias por el código! La verdad es que cuando escaneo con chrome (Ctrl+Shift+I) o con firebug, no entiendo nada del código no se por qué xd!

Aún así necesitaría, si pueden, que me expliquen dos cosas.
El "<div id=topnav>" significa que esto va en la parte de arriba del navegador º-º xd!
Y el "<li class=active>" para qué sirve?
De todas formas, como le aplica el css a todo eso? Hace poco hice los cursos y todavía no logro retener todas la información, muchas gracias por sus respuestas.

--- Update ---

De todas formas, probé ese código y solo aparece la lista, pero no que cuando deslices el mouse sobre un menú aparezcan los otros :p

Espero que puedan sacarme la duda

Hmmm, lo que pasa es que esa es solo la estructura del menú, hay que darle estilo con CSS. Aquí están los estilos necesarios (sacados del mismo sitio; soy un verdadero ladrón XD) para que sea vea igual que en el sitio:

#topnav {
    background-color: #000000;
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: normal;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 660px;
}
#topnav ul, #topnav li {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover {
    background-color: #000000;
    color: #FFFFFF;
    display: block;
    margin: 0;
    padding: 15px 20px;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited {
    border: medium none;
}
#topnav li.last a {
    margin-right: 0;
}
#topnav li a:hover, #topnav ul li.active a {
    background-color: #059BD8;
    color: #FFFFFF;
}
#topnav li li a:link, #topnav li li a:visited {
    background-color: #000000;
    color: #FFFFFF;
    float: none;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    padding: 7px 10px;
    width: 150px;
}
#topnav li li a:hover {
    background-color: #059BD8;
    color: #FFFFFF;
}
#topnav li ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    height: auto;
    left: -999em;
    position: absolute;
    width: 170px;
    z-index: 9999;
}
#topnav li ul a {
    width: 140px;
}
#topnav li ul ul {
    margin: -32px 0 0;
}
#topnav li:hover ul ul {
    left: -999em;
}
#topnav li:hover ul, #topnav li li:hover ul {
    left: auto;
}
#topnav li:hover {
    position: static;
}
#topnav li.last a {
    margin-right: 0;
}

El atributo class="active" es un estilo para decirle al navegador que ese es el ítem activo y que debe llevar un fondo de color celeste mientras se este en esa página. En el fondo es para que resalte cuando se este en la página.

Saludos.

Muchísimas gracias, te veo futuro como ladrón (?)
Luego de un rato lo pruebo y te digo como me fue, gracias!

Muchísimas gracias, te veo futuro como ladrón (?)

Jejejejej, más o menos.