Undskyld glemte lige at sætte koden ind:
---------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Navigationsbjælke med dropdown-menu</title>
<script type="text/javascript">
var currentMenu = null;
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.onmouseover = function() {
if (currentMenu) {
currentMenu.style.visibility = "hidden";
this.showMenu();
}
}
actuator.onclick = function() {
if (currentMenu == null) {
this.showMenu();
}
else {
currentMenu.style.visibility = "hidden";
currentMenu = null;
}
return false;
}
actuator.showMenu = function() {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetTop + this.offsetHeight + "px";
menu.style.visibility = "visible";
currentMenu = menu;
}
}
window.onload = function() {
initializeMenu("genereltMenu", "genereltActuator");
initializeMenu("artiklerMenu", "artiklerActuator");
initializeMenu("cssMenu", "cssActuator");
initializeMenu("jsMenu", "jsActuator");
initializeMenu("navMenu", "navActuator");
initializeMenu("dhtmlMenu", "dhtmlActuator");
initializeMenu("searchMenu", "searchActuator");
}
</script>
<style type="text/css" media="screen">
#mainMenu {
font-family:arial,sans-serif;
font-size:10px;
background-color: #1a0099;
border: 1px solid #1a0099;
color: #fff;
margin: 0px;
margin-top:5px;
padding: 0px 0px 1px 0px;
text-align:left;
}
#menuList {
margin: 0px;
padding: 0px;
}
#menuList ul {
margin: 15px;
padding: 0px;
text-align:left;
font-weight:bold;
}
#menuList li {
display: inline;
list-style: none;
}
.menubar {
font-weight:bold;
border-left:1px solid white;
}
a.actuator {
background-color: transparent;
color: #fff;
font-size: 12px;
margin: 0px;
padding: 3px 6px;
text-decoration: none;
}
a.actuator:hover {
background-color: white;
color: #1a0099;
}
.menu {
color: #1a0099;
background-color: #fff;
position: absolute;
visibility: hidden;
z-index:9;
}
.menu li a {
background-color: #1a0099;
color: #fff;
display: block;
font-size: 12px;
line-height: 1.75em;
margin: 0px;
padding: 0px 10px;
text-decoration: none;
border:1px solid black;
border-top:none;
}
.menu li a:visited {
background-color: #1a0099;
color: #ccc;
}
.menu li a:hover {
background-color: white;
color: #1a0099;
}
#genereltMenu { width: 130px; }
#artiklerMenu { width: 160px; }
#cssMenu { width: 160px; }
#jsMenu { width: 170px; }
#navMenu { width: 180px; }
#farverMenu { width: 160px; }
#dhtmlMenu { width: 160px; }
#searchMenu { width: 130px; }
</style>
</head>
<body>
<div id="mainMenu">
<ul id="menuList">
<li class="menubar">
<a href="java script:void(null)" id="genereltActuator" class="actuator">
Generelt / Servicesider</a>
<ul id="genereltMenu" class="menu">
<li><a href="#">Introduktion</a></li>
<li><a href="#">Nyhedsbrev / arkiv</a></li>
<li><a href="#">Søg på siderne</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Ikast Vejviser</a></li>
<li><a href="#">Kursusweb</a></li>
<li><a href="#">Links</a></li>
</ul>
</li>
<li class="menubar">
<a href="java script:void(null)" id="artiklerActuator" class="actuator">
Artikler</a>
<ul id="artiklerMenu" class="menu">
<li><a href="#">Oversigt</a></li>
<li><a href="#">Hvad er zip-filer?</a></li>
<li><a href="#">FTP-upload</a></li>
<li><a href="#">Vis kildekode</a></li>
<li><a href="#">HTML-tegnelementer</a></li>
<li><a href="#">Genbrug af MAP-data</a></li>
<li><a href="#">Browsersniffing</a></li>
<li><a href="#">Omdirigering</a></li>
<li><a href="#">Hvad er en Java Applet?</a></li>
<li><a href="#">Kodeordsbeskyttelse</a></li>
</ul>
</li>
<li class="menubar">
<a href="java script:void(null)" id="cssActuator" class="actuator">
CSS (Stylesheets)</a>
<ul id="cssMenu" class="menu">
<li><a href="#">Oversigt</a></li>
<li><a href="#">Se mor, uden tabeller!</a></li>
<li><a href="#">CSS tekstformatering</a></li>
<li><a href="#">Formatering af lister</a></li>
<li><a href="#">CSS-layout af websider</a></li>
<li><a href="#">CSS-rollover</a></li>
<li><a href="#">Cursorkontrol</a></li>
<li><a href="#">Stylesheets til udskrift</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
