<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<meta name="author" content="doktormolle" />
<meta name="date" content="2010-08-24" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script id="testscript" type="text/javascript">
<!--
//nur für css-zeugs
$('html').addClass('scripted');
$(document).ready(function(){
$('ul.nav')
//Event nur 1x beachten
.one('mouseenter',
function()
{
//Transparenz und visibility ändern, spart das ganz opacity-Zeugs im CSS
$(this).parent().find("ul.nav > li ul").css({opacity:0,visibility:'visible'})
//Eventüberwachung
$(this).parent().find("ul.nav > li").hover(function()
{
$(this).find("ul.nav2").stop().fadeTo('fast',1);
},
function()
{
$(this).find("ul.nav2").stop().fadeTo(1000,0);
}
);
});
});
//-->
</script>
<style type="text/css">
<!--
ul,li{list-style-type:none;margin:0;padding:0;}
html.scripted ul.nav2{visibility:hidden;border:1px dotted #717171}
ul.nav{background:#919191;padding:4px;}
ul.nav li ul{background:#a1a1a1;}
ul.nav li span{background:#c1c1c1;display:block;font-weight:bold;}
-->
</style>
</head>
<body>
<ul style="width:200px;">
<li>
<ul class="nav">
<li><span>#1</span>
<ul class="nav2">
<li>#1.1</li>
<li>#1.2</li>
<li>#1.3</li>
</ul>
</li>
<li><span>#2</span>
<ul class="nav2">
<li>#2.1</li>
<li>#2.2</li>
<li>#2.3</li>
</ul>
</li>
<li><span>#3</span>
<ul class="nav2">
<li>#3.1</li>
<li>#3.2</li>
<li>#3.3</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>