Lister som dynamiske menuer - eksempel 3

Retur til artiklen

http://65.221.157.40/hnav/.

Stylesheet


.sub {
background:url(sub.gif) right no-repeat;
}

#hnav, #hnav li, #hnav ul {
margin:0;  
background:#ccf; 
list-style:none;
}
#hnav{
float:left; 
margin:10px 0 10px 20px;
padding:0; 
border:3px outset #257; 
border-width:1px; 
font-size:100%;
font-weight:bold;
}
#hnav li{
position:relative; 
float:left; 
behavior:url(hover.htc);
}
#hnav a{
display:block; 
padding:5px 7px; 
color:#257;
text-decoration:none;
}
html*#hnav a:hover{/* Skjul for Opera */
background:#257;
color:#fff;
} 
#hnav ul{
display:none; 
padding:2px; 
border:1px outset #fff; 
width:14em; 
z-index:1;
}
#hnav li li{
float:none;
}
#hnav li li a{
padding:4px;
}
* html #hnav li li{display:inline;}
* html #hnav li li a{width:100%;}

#hnav li:hover{background:#fff7e1;}
#hnav li:hover > ul{display:block; position:absolute; top:0; left:100%;}
#hnav > li:hover > ul{top:auto; left:auto;}

/* ie crap */
#hnav li.over ul{display:block; position:absolute;}
#hnav li.over ul ul{display:none;}

#hnav li.over ul li.over ul{display:block; position:absolute; top:0; left:98%;}
#hnav li.over ul li.over ul ul{display:none;}

#hnav li.over ul li.over ul li.over ul{display:block;}

JavaScript (.htc-fil)

<attach event="onmouseover" handler="over" />
<attach event="onmouseout" handler="out" />
<script type="text/javascript">
function over(){
	tmpClassStr=element.className;
	tmpClassStr+='over';
	tmpClassStr=tmpClassStr.replace(/\s/g, 'over ');
	tmpClassStr+=' over';
	element.className=element.className+' '+tmpClassStr;
}

function out(){
	element.className='';
}
</script>