Hi,

Ik ben al een tijdje aan het klooien op mijn menu zo te krijgen dat het werkt en alles goed op zijn plek staat.

Tot nu toe werkt het nog maar half, dus vraag ik jullie om hulp.

Mijn html is:

PHP Code:

<div id="nav">
<ul>

    <li><a class="horhome" href="#">Home</a></li>
    <li><a class="horpatrickdesign" href="#">Patrickdesign</a></li>
        <li><a class="hordiensten" href="#">Diensten</a>
            <ul class="submenu">
                <li><a href="#">Webdesign</a></li>
                <li><a href="#">Webdesign</a></li>
                <li><a href="#">Webdesign</a></li>
                <li><a href="#">Webdesign</a></li>
            </ul>
        </li>
    <li><a class="horshowcase" href="#">Showcase</a></li>
    <li><a class="horcontact" href="#">Contact</a></li>
</ul>
</div> 


CSS:

PHP Code:

#nav{height:33px; line-height:32px; padding:0 50px;}
#nav ul, #nav ul li { margin:0; padding:0; list-style:none;}
#nav ul li{float:left;display:inline; position:relative; background: url('../img/tussenstuk-menu.png') no-repeat;}
#nav ul li a:link,#nav ul li a:visited{color:#fff; font-size:11px; font-weight:bold; text-decoration:none; text-align:center; display:block; }
#nav ul li a:hover{color:#ebeff7;}
#nav ul li ul li{float:none; display:block;}
#nav ul li ul li a:link,#nav ul li ul li a:visited{color:#fff; font-size:11px; font-weight:bold; text-decoration:none; padding:0 10px; clear:both; text-align:left;}
#nav ul li ul li a:hover{background:#449e9d; width: 147px; margin-left:auto; margin-right:auto;}
.submenu {position: absolute; width: 189px; background: #337675; display: none; line-height: 34px; z-index: 1000; border-radius:5px; top:33px;; left: 0; } 


JS:

PHP Code:

<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});

$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});

$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};

$(document).ready(function() {
nav();
}); 


Er moet een streep tussen zoals op deze afbeelding te zien is:


En dan het submenu zo:


Online voorbeeld:

http://www.patrickdesign.nl/help/menu.html

Alvast bedankt.

Groet,

Patrick