[Помогите] Сделать выпадающее меню со списком сайтов

Так как я практикуюсь, у меня несколько сайтов. Хочу в уголке сделать менюшку, чтобы могли зайти на другие сайты. Вот, к примеру, как здесь: rubukkit.org

 

вот красивое меню
html

HTML:

	<ul id="nav">
 
		<li>
			<a href="#" title="Информация о компании">Меню</a>
			<ul>
				<li><a href="#">Раз </a></li>
				<li><a href="#">Дваа</a></li>
	</ul>

css

HTML:

/*------------------------------------*\
СБРОС
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}-----------------*/
#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
}
#nav li a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
 
text-shadow:1px 1px 1px rgba(0,0,0,0.75);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
#nav li a:hover{
color:#fff;
background:#6b0c36;
background:rgba(107,12,54,0.75); 
text-decoration:underline;
}
 
#nav ul{
list-style:none;
position:absolute;
left:-9999px;
opacity:0;
-webkit-transition:0.25s linear opacity;
}
 
#nav ul a{
white-space:nowrap;
display:block;
}
#nav li:hover ul{ 
left:0; 
opacity:1; 
}
#nav li:hover a{
background:#6b0c36;
background:rgba(107,12,54,0.75);
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ 
background:#333;
background:rgba(51,51,51,0.75);
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}