Beklager - og mange tak fordi du gider hjælpe. Her følger koden:
<html>
<title>CSS til vertical</title>
<head>
<style type="text/css">
ul.vertical, ul.vertical li {
margin:0;
padding:0;
list-style-type:none;
font-size:100%;
}
ul.vertical {
position:absolute;
z-index:1000;
cursor:default;
width:8em;
left:1em;
top:4.05em;
}
ul.vertical li {
position:relative;
text-align:left;
cursor:pointer;
cursor:hand;
width:8em;
margin:-1px 0 0 0;
}
ul.vertical ul {
z-index:1020;
cursor:default;
position:absolute;
width:8.2em;
margin: 0 0 3em;
top:-100em;
left:-1px;
padding:1px 0 0 0;
margin-left: 8em;
}
ul.vertical ul li {
width:8.2em;
}
ul.vertical ul ul {
margin:0em 0 0 8.2em;
}
@media Screen, Projection {
ul.vertical li:hover > ul { top:0; }
}
ul.vertical a, ul.vertical a:visited {
display:block;
cursor:pointer;
cursor:hand;
background:#ffc;
border:1px solid #edbb85;
padding:5px 7px;
font:normal normal bold 0.7em tahoma, verdana, sans-serif;
color:#008000;
text-decoration:none;
letter-spacing:1px;
}
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
background:#ffefcf;
color:#806020;
}
@media screen, projection {
* html ul.vertical li {
display:inline;
f\loat:left;
background:#ffffff;
}
}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }
</style>
<script type="text/javascript">
window.onload = function()
{
var verticals = new simpleMenu('menu-v', 'vertical');
var horizontals = new simpleMenu('menu-h', 'horizontal');
};
function simpleMenu(navid, orient){if(typeof document.getElementById == 'undefined' || /opera[\/ ][56]/i.test(navigator.userAgent)) { return; }this.iskde = navigator.vendor == 'KDE';this.isie = typeof document.all != 'undefined' && typeof window.opera == 'undefined' && !this.iskde;this.isoldsaf = navigator.vendor == 'Apple Computer, Inc.' && typeof XMLHttpRequest == 'undefined';this.tree = document.getElementById(navid);if(this.tree != null){this.items = this.tree.getElementsByTagName('li');this.itemsLen = this.items.length;var i = 0; do{this.init(this.items[i], this.isie, this.isoldsaf, this.iskde, navid, orient);}while (++i < this.itemsLen);}}simpleMenu.prototype.init = function(trigger, isie, isoldsaf, iskde, navid, ishoriz){trigger.menu = trigger.getElementsByTagName('ul').length > 0 ? trigger.getElementsByTagName('ul')[0] : null;trigger.link = trigger.getElementsByTagName('a')[0];trigger.issub = trigger.parentNode.id == navid;trigger.ishoriz = ishoriz == 'horizontal';this.openers = { 'm' : 'onmouseover', 'k' : (isie ? 'onactivate' : 'onfocus') };for(var i in this.openers){trigger[this.openers[i]] = function(e){if(!iskde) { trigger.link.className += (trigger.link.className == '' ? '' : ' ') + 'rollover'; }if(trigger.menu != null){if(trigger.ishoriz) { trigger.menu.style.left = (isie || isoldsaf) ? trigger.offsetLeft + 'px' : 'auto'; }trigger.menu.style.top = (trigger.ishoriz && trigger.issub) ? (isie || (trigger.ishoriz && isoldsaf)) ? trigger.link.offsetHeight + 'px' : 'auto' : (isie || (trigger.ishoriz && isoldsaf)) ? trigger.offsetTop + 'px' : '0';}};}this.closers = { 'm' : 'onmouseout', 'k' : (isie ? 'ondeactivate' : 'onblur') };for(i in this.closers){trigger[this.closers[i]] = function(e){this.related = (!e) ? window.event.toElement : e.relatedTarget;if(!this.contains(this.related)){if(!iskde) { trigger.link.className = trigger.link.className.replace(/[ ]?rollover/g, ''); }if(trigger.menu != null){trigger.menu.style[(trigger.ishoriz ? 'left' : 'top')] = trigger.ishoriz ? '-10000px' : '-100em';}}};}if(!isie){trigger.contains = function(node){if (node == null) { return false; }if (node == this) { return true; }else { return this.contains(node.parentNode); }};}}
</script>
</head>
<body>
<ul id="menu-v" class="vertical">
<li><a name="navigation" href="
http://www.test.dk/">1</a> <ul>
<li><a href="
http://www.test.dk/1a">1a</a></li> <li><a href="
http://www.test.dk/1b">1b</a></li> <li><a href="
http://www.test.dk/1c">1c</a></li> </ul>
</li>
<li><a href="
http://www.test.dk/2">2</a> <ul>
<li><a href="
http://www.test.dk/2a">2a</a></li> <li><a href="
http://www.test.dk/2b">2b</a></li> <li><a href="
http://www.test.dk/2c">2c</a></li> </ul>
</li>
<li><a href="
http://www.test.dk/3">3</a> <ul>
<li><a href="
http://www.test.dk/3a">3a</a></li> <li><a href="
http://www.test.dk/3b">3b</a></li> <li><a href="
http://www.test.dk/3c">3c</a></li> </ul>
</li>
<li><a href="
http://www.test.dk/4">4</a></li> <li><a href="
http://www.test.dk/5">5</a> <ul>
<li><a href="
http://www.test.dk/5a">5a</a> <ul>
<li><a href="
http://www.test.dk/5a/a">5aa</a></li> <li><a href="
http://www.test.dk/5a/b">5ab</a></li> <li><a href="
http://www.test.dk/5a/c">5ac</a></li> <li><a href="
http://www.test.dk/5a/d">5ad</a></li> </ul>
</li>
<li><a href="
http://www.test.dk/5b">5b</a></li> <li><a href="
http://www.test.dk/5c">5c</a></li> <li><a href="
http://www.test.dk/5d">5d</a></li> </ul>
</li>
<li><a href="
http://www.test.dk/6">6</a> </li>
</ul>
</body>
</html>
