So nun der Css Code:
Code
#menu ul{
margin:0;
padding:0;
list-style:none;
}
#menu>ul{
float:left;
background-image:url(../img/toplinie.png);
}
#menu>ul>li{
float:left;
display:block;
width:175px;
height:75px;
line-height:75px;
text-align:center;
color:#FFF;
}
#menu>ul>li ul{
display:none;
}
#menu>ul>li li{
background-color:#333;
width:175px;
}
#menu>ul>li li:hover{
background-color:#666666;
}
#menu>ul>li>ul ul{
position:absolute;
margin-left:170px;
margin-top:-75px;
}
#menu:not(.js) li:hover>ul{
display:block;
}und nun ein kleiner ausschnitt aus dem html
Code
<div style="float:left;" id="menu">
<ul>
<li>
Menü 2
<ul>
<li>Menü 2.1</li>
<li>Menü 2.2</li>
<li>Menü 2.3</li>
</ul>
</li>Code
<script src="http://canals.ch/jquery-latest.js" type="text/javascript"></script>
<script src="http://canals.ch/jquery-ui-latest.js" type="text/javascript"></script>
<script src="http://canals.ch/wordpress/wp-content/themes/alex/js/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#menu').addClass('js');
$('#menu li').hoverIntent(function(e)
{
$(this).find('>ul').slideDown('slow');
},
function(e){
$(this).find('ul').slideUp('slow');
});
});mit freundlichem Gruß
Timo Schneider