Submenu werkt niet goed in IE en Firefox

[noob2070]

Hey,

Ik ben dus bezig voor mijn werk met een nieuwe website, alleen ik krijg het submenu maar niet goed werkend.
In Chrome komt het submenu gewoon onder de goede tekst, alleen in IE en Firefox komt ie elke keer onder "Home".

Dit is de html code voor het menu:

<div id="menu">
    	<ul>
        	<li><a href="index.php">Home</a>
            	<ul>
                	<li><a href="sub/">Iets</a></li>
                    <li><a href="sub/">Iets</a></li>
                    <li><a href="sub/">Iets</a>
                </ul>
            </li>
            <li><a href="produten/">Producten</a>
            	<ul>
                	<li><a href="#">Iets</a></li>
                    <li><a href="#">Iets</a></li>
                    <li><a href="#">Iets</a></li>
                    <li><a href="#">Iets</a></li>
                </ul>
            </li>
            <li><a href="#">Iets</a>
            	<ul>
                	<li><a href="#">Iets</a></li>
                    <li><a href="#">Iets</a></li>
                    <li><a href="#">Iets</a></li>
                </ul>
            </li>
            <li><a href="#">Iets</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    </div>

Css code:

#menu {
	width:1350px;
	margin:27px auto;
}
#menu ul {
	float:right;
}
#menu ul li {
	display:inline;
	padding:8px 15px;
	position:relative;
}
#menu ul li a {
	text-decoration:none;
	color:#00F;
	font-size:20px;
}
#menu ul li ul {
	display:block;
	list-style:none;
	position:absolute;
	z-index:999;
	clear:both;
	width:170px;
	margin-top:9px;
	margin-left:5px;
	background-color:#FDFDFD;
	border-bottom:2px solid #03F;
	border-radius:4px;
}	
#menu ul li ul li {
	display:block;
	margin:0;
	padding:8px;	
}
#menu ul li ul li a {
	font-size:19px;	
	display:block;
}

En als laatste de Jquery code:

$(document).ready(function() {
	$('#menu ul li ul').hide();
	
	$('#menu ul li').hover( function() {
		 $(this).find('ul:first').slideDown('slow');
	},
	function() { 
		$(this).find('ul').slideUp('fast'); });
});

Hopelijk snappen jullie met wat ik bedoel.

Alvast bedankt,
Jeffrey

 

[dudstone]

dit komt deels door de margin-top die je hebt meegegeven aan #menu ul li ul. Vervang deze eens door padding-top

 

[noob2070]

Ik heb margin-top: voor top: veranderd, maar ik heb nog steeds het zelfde probleem.

 

[dudstone]

ik zeg ook dat je hem moet vervangen naar padding-top... nu zit er een marge tussen de li en de ul oftewel dat ziet hij als een mouseOut en weer een mouseOver

 

[noob2070]

Ik heb het nu veranderd naar padding-top, maar dit ziet er heel lelijk uit, en hij doet het nog steeds niet.

 

[noob2070]

Zou anders iemand die tijd er voor heeft een css submenu gebaseerd op mijn html willen maken die het wel zou doen?
Ik kom er namelijk niet uit.

 

[bron]

In de bijlage vind je het menu dat ik voor je heb gemaakt.
Door gebruik van een framework gaat dit snel en is het overzichtelijk.
Je hoeft je dan alleen met afmetingen en opmaak bezig te houden.

In je html moet je wel de bovenste <ul> wijzigen in <ul class="nav">

Leef je uit met leuke kleurtjes
Suc6.

 

[bron]

Uhh... "Vraag is niet opgelost". Zoja, wijzig de status dan even.
Als je een vraag over het (sub)menu hebt, laat het dan even weten.