Выпадающее меню

[Tanuhin]

Огромная просьба! Помогите с выпадающим меню. Прочитала сотни примеров, но что-то у меня не получается, рассыпается вся моя конструкция.

У меня имеется серое поле #grau_navi, на нем расположен блок #box_navi со списками непосредственно самих ссылок. При нажатии на ссылку GALERIE должно появится вертикальное подменю.

Вот код:

#mitte{
 background-color: #FFFFFF;
 /*position: absolute;*/
 width: 100%;
 left: 0px;
 float: left;
 border-color: #344d61;
 border-style: ridge;
 border-left-width: 1px;
 border-right-width: 1px;
 border-top-width: 0;
 border-bottom-width: 0;

}
#grau_navi{
 background-color: #bcc4cb;
 float: left;
 height: 600px;
 width: 13.5em;
 margin: 0;
 margin-top: 1px;
}
#box_navi {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.2em;
 color: #0d2e6b;
 font-weight: bold;
 margin: 0px;
 display: block; 
 line-height: 1.5em; 
 padding: 6px 11px 0 11px;

 }
ul#box_navi {
 list-style-type: none; 
 }
ul#box_navi li{
display: block;
 } 
ul#box_navi li a:link{
 list-style-type: none;
 color: #0d2e6b;
 text-decoration:none;

} 
ul#box_navi li a:visited{
 list-style-type: none;
 color:#0d2e6b;
 text-decoration:none;
} 
ul#box_navi li a:hover{
 color: #d9dfd7;
 text-decoration:none;
}
ul#box_navi li a:active
 {
 list-style-type: none;
 color:#d9dfd7;
 text-decoration:none;
}
/* ——— PODMENU—--otsuda polnaja nerasberiha———————-*/
ul#box_navi li ul {
display: none; 
position: absolute;
list-style-type: none;
}

<div id="mitte">
 <div id="grau_navi">
 <div id="box_navi">
 <ul id="box_navi">
 <li><a href="biografie.htm" onfocus="blur()" target="_self">über mich</a></li>
 <li><a href="#">galerie</a></li>
 <ul>
 <li><a href="#">aquarell</a></li>
 <li><a href="#">grafik</a></li>
 <li><a href="#">acryl</a></li>
 <li><a href="#">öl</a></li>
 <li><a href="#">mischtechnik</a></li>
 </ul>
 <li><a href="#">malkurse</a></li>
 <li><a href="#">workshop</a></li>
 <li><a href="#">presse</a></li>
 <li><a href="#">links</a></li>
 </ul>
 </div>
 </div>

 </div>

Спаибо всем, кто откликнется

[Valerian]

а вот так -

сss:
#mitte{
 background-color: #FFFFFF;
 /*position: absolute;*/
 width: 100%;
 left: 0px;
 float: left;
 border-color: #344d61;
 border-style: ridge;
 border-left-width: 1px;
 border-right-width: 1px;
 border-top-width: 0;
 border-bottom-width: 0;
}
#grau_navi{
 background-color: #bcc4cb;
 float: left;
 height: 600px;
 width: 13.5em;
 margin: 0;
 margin-top: 1px;
}
#box_navi {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 1.2em;
 color: #0d2e6b;
 font-weight: bold;
 margin: 0px;
 display: block; 
 line-height: 1.5em; 
 padding: 6px 11px 0 11px;
}
ul#box_navi {
	float: left;
 list-style-type: none; 
 }
ul#box_navi li{
display: block;
position: relative;
 }
ul#box_navi li a:link{
 color: #0d2e6b;
 text-decoration:none;
} 
ul#box_navi li a:visited{
 list-style-type: none;
 color:#0d2e6b;
} 
ul#box_navi li a:hover{
 color: #d9dfd7;
}
ul#box_navi li a:active {
 list-style-type: none;
 color:#d9dfd7;
}
#box_navi li:hover ul {
	display: block;
}
ul#box_navi li ul {
display: none;
top: 0;
left: 0px;
position: absolute;
list-style-type: none;
}


html:
<div id="mitte">
 <div id="grau_navi">
 <div id="box_navi">
 <ul id="box_navi">
 <li><a href="">Link1</a></li>
 <li><a href="">Link1</a>
 <ul>
 <li><a href="#">aquarell</a></li>
 <li><a href="#">grafik</a></li>
 <li><a href="#">acryl</a></li>
 <li><a href="#">o"l</a></li>
 <li><a href="#">mischtechnik</a></li>
 </ul>
		 </li>
 <li><a href="#">Link2</a></li>
 <li><a href="#">Link3</a></li>
 <li><a href="#">Link4</a></li>
 <li><a href="#">Link5</a></li>
 </ul>
 </div>
 </div>
 </div>

[Dimitry Wolotko]

Valerian, юзайте ББ-коды. Спасибо.

[Tanuhin]

Spasibo sa to, chto ubili na moi vopros vremja, no ono ... ne rabotaet. Vse ravno sapsibo.