Menu CSS vers le haut

Bonjour à tous,
j'aurais une petite question à vous poser :
je suis entrain de faire un site portfolio et je me suis dis que je vais faire comme si c'était un écran d'ordinateur portable, donc du coup j'ai fait la page et là je suis sur le menu "démarrer" qui donc s'ouvrira du bas vers le haut.
le seul problème par défault un menu css avec ces éléments :

<div id="menu" style="height: 20px; width: 65px;">
        <dl>
          <dt onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">&nbsp;</dt>
          <dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
            <li class="opaque" ><a href="#">Profil</a></li>
              <li class="opaque" ><a href="#">Dessins et Croquis</a></li>
              <li class="opaque" ><a href="#">Créations et Retouches</a></li>
              <li class="opaque" ><a href="#">Déssins véctoriels</a></li>
              <li class="opaque" ><a href="#">Animations Flash</a></li>
              <li class="opaque" ><a href="#">Photographies</a></li>
              <li class="opaque" ><a href="#">Vidéos</a></li>
              <li class="opaque" ><a href="#">Contactez moi</a></li>
            </ul>
          </dd>
          </dt>
        </dl></div>

et en CSS

dl, dt, dd, ul, li {
	margin: 0;
	padding:0;
	list-style-type: none;
}
#menu {
	position: absolute;
	z-index:100;
	width: 65px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:11px;
}
#menu dl {
	float: left;
	width: 160px;
	position:relative;
}
#menu dt {
	display:block;
	height:20px;
	width:65px;
	cursor: pointer;
	text-align: left;
	background-image: url(../images/btn_menu.png);
	background-position:top;
	color:#000000;
	background-repeat: no-repeat;
	border: 0px solid #996600;
	vertical-align:middle;
	bottom:0;
     }
}
#menu dd {
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	position:absolute;
}
#menu li {
	text-align: center;
	background: #fff;
	height:25px;
	padding-top:0px;
}
#menu li a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	padding-top:5px;
}
#menu dt a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	padding-top:5px;
}
#menu li a:hover {
	background: #000000;
	color:#FFFFFF;
	vertical-align:middle;
	height:20px;
	padding-top:5px;
}
#menu dt a:hover {
	background-position:bottom;
	background-repeat: no-repeat;
	text-decoration:none;
}
#menu dt:hover {
	background-position:bottom;
	background-repeat: no-repeat;
	text-decoration:none;
}
a {text-decoration: none;
color: black;
color: #222;
}

en mettant le bottom:0 le bouton se met tout en bas de la page et ça je le veux pas et de plus en relative celà me déforme ma page et de toute façon le menu s'ouvre vers le bas quand même.

j'aimerais savoir quel chemin prendre pour résoudre ce problème.

je vous remerci d'avance

le site sans le menu installé est ici => http://metllicak.free.fr (ce n'est qu'un serveur de teste)