Horizental menu with horizental sub menu

----------------------Aspx page----------------------------------------

< link rel="stylesheet" type="text/css" href="Menu/2leveltab.css" />

< script type="text/javascript" src="Menu/2leveltab.js" />


< div class="grid_12">
< ul id="maintab" class="main-menu">
< li rel="Ämnen">< a href="#" class="selected">Ämnen< /a>< /li>
< li rel="Tema">< a href="#">Tema< /a>< /li>
< li rel="Expertpanelen">< a href="#">Expertpanelen< /a>< /li>
< li>< a href="#">Forskare i fokus< /a>< /li>
< li>< a href="#">Om oss< /a>< /li>
< /ul>
< div class="clear">
< /div>
< div id="Ämnen">
< ul class="sub-menu">
< li>< a href="#">Värdegrund< /a>< /li>
< li>< a href="#">Lek, lärande och omsorg< /a>< /li>
< li>< a href="#">Organisation< /a>< /li>
< li>< a href="#">Hälsa och miljö< /a>< /li>
< li>< a href="#">Idébank< /a>< /li>
< /ul>
< /div>
< div id="Tema" style="display:none">
< ul class="sub-menu">
< li>< a href="#">Värdegrund 1< /a>< /li>
< li>< a href="#">Lek, lärande och omsorg 1< /a>< /li>
< li>< a href="#">Organisation 1< /a>< /li>
< li>< a href="#">Hälsa och miljö 1< /a>< /li>
< li>< a href="#">Idébank 1< /a> < /li>
< /ul>
< /div>
< div id="Expertpanelen" style="display:none">
< ul class="sub-menu">
< li>< a href="#">Värdegrund 2< /a>< /li>
< li>< a href="#">Lek, lärande och omsorg 2< /a>< /li>
< li>< a href="#">Organisation 2< /a>< /li>
< li>< a href="#">Hälsa och miljö 2< /a>< /li>
< li>< a href="#">Idébank 2< /a> < /li>
< /ul>
< /div>
< div class="clear">
< /div>

< script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
< /script>

< /div>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------css-------------------------------------------
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}


.basictab li a:visited{
color: black;
}

.basictab li a:hover{
background-color: #dbffff;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}


.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #ebffff;
}
---------------------------------java script--------------------------------
var mastertabvar = new Object()
mastertabvar.baseopacity = 0
mastertabvar.browserdetect = ""

function showsubmenu(masterid, id) {
if (typeof highlighting != "undefined")
clearInterval(highlighting)
submenuobject = document.getElementById(id)
mastertabvar.browserdetect = submenuobject.filters ? "ie" : typeof submenuobject.style.MozOpacity == "string" ? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display = "block"
instantset(mastertabvar.baseopacity)
highlighting = setInterval("gradualfade(submenuobject)", 50)
}

function hidesubmenus(submenuarray) {
for (var i = 0; i < submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display = "none"
}

function instantset(degree) {
if (mastertabvar.browserdetect == "mozilla")
submenuobject.style.MozOpacity = degree / 100
else if (mastertabvar.browserdetect == "ie")
submenuobject.filters.alpha.opacity = degree
}


function gradualfade(cur2) {
if (mastertabvar.browserdetect == "mozilla" && cur2.style.MozOpacity < 1)
cur2.style.MozOpacity = Math.min(parseFloat(cur2.style.MozOpacity) + 0.1, 0.99)
else if (mastertabvar.browserdetect == "ie" && cur2.filters.alpha.opacity < 100)
cur2.filters.alpha.opacity += 10
else if (typeof highlighting != "undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid) {
mastertabvar[tabid] = new Array()
var menuitems = document.getElementById(tabid).getElementsByTagName("li")
for (var i = 0; i < menuitems.length; i++) {
if (menuitems[i].getAttribute("rel")) {
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length] = menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className == "selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover = function() {
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}