Z horizontálného menu na vertikálne

Čo a kde mám prepísať v tomto:

<style type="text/css">
/* <![CDATA[ */

/* Spolocne styly */

* {margin: 0; padding: 0;}
body {width: 100%; margin-left: 10px; font: small/1.7 Verdana, Arial, lucida, helvetica, sans-serif; background: #fff; color: #333; overflow: hidden;}
h1 {width: 700px; font-size: 1.5em; font-weight: normal; line-height: 2em; margin-bottom: 0.5em; text-align: center;}
p {width: 700px; margin-bottom: 0.5em; text-align: center;}
.clear {clear: both;}

/* Hlavne menu */

#menu {width: 690px; background: #ddd url(menu.gif) left bottom repeat-x; border-top: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999;}
#menu ul {list-style-type: none;}
#menu li {float: left; width: 138px; position: relative;}
#menu li a {display: block; line-height: 2em; text-align: center; background: transparent; color: #333; border-left: 1px solid #999; text-decoration: none;}
#menu li a:hover, #menu li a.select {color: #000; background: #f8f8f8;}
#menu div ul {position: relative; display: block; width: 139px; margin-top: 1px;}
#menu div ul.wider {width: 150px;}
#menu div ul li {width: 100%;}
#menu div ul li a {padding: 2px 3px 2px 7px; line-height: 1.4em; font-weight: normal; text-align: left; background: #ddd; border-right: 1px solid #999; border-bottom: 1px solid #999;}
#menu div ul li a: hover {color: #000; background-color: #fff;}
#menu div div {position: absolute; overflow: hidden; width: 150px; height: 10em;}

/* Hacky pre IE 5.x a IE 6 */

* html body {font-size: x-small;}
* html #menu li a {width: 100%}
* html #menu {width: 691px;}

/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */

var base = "menu";
var maxMenuItem = 10;
var timer;
var visible = 0;
var curr_index;
var ids = new Array();
function collapseMenu() {
for (var i=0; i<ids.length; i++) {
var div = document.getElementById(base).getElementsByTagName('div')[2*i+1];
div.style.visibility = "hidden";
var ul = document.getElementById(base).getElementsByTagName('div')[2*i+1].getElementsByTagName('ul')[0];
ul.style.display = "block";
var item = document.getElementById(ids[i]);
item.className = "";
}
visible = 0;
}
function showMenu() {
var index = 0;
while (index<ids.length && document.getElementById(ids[index])!=this) {index++}
if (!visible) {
curr_index = index;
timer = setTimeout("writeMenu('"+index+"')",250);
}
else {
if (timer) {
clearTimeout(timer);
if (curr_index == index)
visible = 1;
else {
curr_index = index;
writeMenu(index);
}
}
}
}
function hideMenu() {
if (visible) {
timer = setTimeout("collapseMenu()",500);
}
else if (timer) {
clearTimeout(timer);
visible = 0;
}
}
function writeMenu(index) {
var el = document.getElementById(base).getElementsByTagName('div')[2*index+1].getElementsByTagName('ul')[0];
if (el.init==null) {
el.init = true;
el.inc = 1;
el.size = -maxMenuItem;
collapseMenu();
el.style.display = "block";
document.getElementById(base).getElementsByTagName('div')[2*index+1].style.visibility = "visible";
document.getElementById(ids[index]).className = "select";
visible = 1;
}
el.style.top = el.size+"em";
el.size += el.inc;
if (el.size<=0)
setTimeout("writeMenu('"+index+"')",50);
else el.init = null;
}
function focusMenu() {
var index = 0;
while (index<ids.length && document.getElementById(ids[index])!=this) {index++}
curr_index = index;
writeMenu(index);
}
window.onload = function() {
if (document.getElementById) {
var links = document.getElementById(base).getElementsByTagName('a');
var divs = document.getElementById(base).getElementsByTagName('div');
for (var i=0, j=0; i<links.length; i++)
if (links[i].getAttribute('id')) {
ids[j] = links[i].getAttribute('id'); j++;
}
collapseMenu();
for (var i=0; i<links.length; i++)
if (links[i].getAttribute('id')) {
links[i].onmouseover = showMenu;
links[i].onfocus = focusMenu;
links[i].onmouseout = hideMenu;
} else links[i].onclick = function() {collapseMenu(); return true;};
for (var i=0; i<2*ids.length; i+=2) {
divs[i+1].getElementsByTagName('ul')[0].onmouseover = function() {if (visible) clearTimeout(timer);}
divs[i+1].getElementsByTagName('ul')[0].onmouseout = hideMenu;
}
links[links.length-1].onblur = hideMenu;
}
}

/* ]]> */
</script>

-----------------------------------------------------------------------------------------------------


<h1>Hover menu 1</h1>
<div id="menu">
<ul>
<li><a href="#">Úvod</a></li>
<li><a href="#" id="vyucba">Výučba</a>
<div><div>
<ul class="wider">
<li><a href="#">Osnova predmentu</a></li>
<li><a href="#">Základné pojmy</a></li>
<li><a href="#">Teoretické otázky</a></li>
<li><a href="#">Odporúčané príklady</a></li>
<li><a href="#">Termíny skúšok</a></li>
</ul>
</div></div>
</li>
<li><a href="#" id="vyskum">Výskum</a>
<div><div>
<ul>
<li><a href="#">O výskume</a></li>
<li><a href="#">Publikácie</a></li>
<li><a href="#">Projekty</a></li>
</ul>
</div></div>
</li>
<li><a href="#" id="rozne">Rôzne</a>
<div><div>
<ul>
<li><a href="#">Odkazy</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Info</a></li>
</ul>
</div></div>
</li>
<li><a href="#" id="autor">Autor</a>
<div><div>
<ul>
<li><a href="#">O autorovi</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div></div>
</li>
</ul>
<div class="clear"></div>
</div>



... aby sa z toho menu stalo vertikálne menu (bunky menu budú nad sebou) namiesto horizontálného ( bunky menu sú vedľa seba) ???

Zhrnutie (pre pochopenie otázky):

Čo a kde mám prepísať v tomto:(to hore) aby sa z toho menu stalo vertikálne???

Za odpovede dopredu ďakujem!!!

Tak vám poviem uzavrite toto téma lebo dokým ste mi tú otázku zodpovedali, som si to dokázal vyriešiť sám. :)