Menú lateral avanzado II

Crear el div

Para empezar vamos a crear un div llamado menulateral en css de la siguiente forma y con estas cosas:

#menulateral{background-color:#0033FF; width:150px ; float:right}


Ahora, tene tenemos que hacer que salga la parte de arriba cuando escribas algo en el div, por ejemplo un h1. El h1 es muy grande, asi que le pondremos menos tamaño en el div menulateral. Para que en el h1 salga la imagen del menu superior, pon background image:

#menulateral h1 {text-decoration:none ; font-size:12px ; background-image: url(http://comoconstruirtuweb.blogcindario.com/ficheros/menu-curva-superior-1.gif) }

Entonces si ponemos un h1 en el div menulateral:
<div id="div">
<p>A la derecha hay un menú lateral</p>
<div id="menulateral">
<h1>menú lateral</h1>
<ul>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
<li><a href="#">Enlace</a></li>
</ul>
</div>
</div>

Saldría:
A continuación, arreglaremos el menú puesto que se ve mal.

Tags: menú lateral, css, html, div, <div>