Dropdown menu Css

[joery90]

Goede middag mensen,

mijn vraagje was ik heb nu een menu met dropdown en nu pakt deze drop down item ook het item die ik gebruik in de bovenste menu balk ( deze is opgedeeld in 3 delen vanweg de dropschadow achter het plaatje ) maar hij pakt nu ook het linker gedeelte hiervan in de dropdowns. Kan iemand mij hiervan af helpen.

bedankt alvast Joery

div#menu{
	height: 36px;
	width:100%;
	background: #FFF url(../images/menubg.png);
	font-family: Arial, Verdana, sans-serif;
	margin-top:-9px
}

div#menuknop{
	color:#ffffff;
	height: 28px;
	width:940px;
	padding-left:20px;
	margin:0 auto;
}

div#menuknop li { 
	float:left; 
	height:37px; 
	margin-left:1px;
	margin-right:1px; 
	min-width: 80px;
}

div#menuknop li span { padding: 0 15px; line-height: 36px; }
li.active { background: url('../images/menuknopm.png') repeat-x;}
li.active  a{ background: url('../images/menuknopl.png') no-repeat left; height:36px; display: block; }
li.active  span  { background: url('../images/menuknopr.png') no-repeat right; height:36px; display: block; }


div#menuknop .onderliggendmenu { 
	position: relative;
}
div#menuknop .onderliggendmenu li {
	height: 30px;
	padding: 0;
}
div#menuknop .onderliggendmenu ul {
	height: 30px;
	padding: 0;}

div#menuknop .onderliggend a {
	line-height: 30px;
	min-width:	180px;
}
div#menuknop .onderliggend { 
	display: none;
	position: absolute;
	background: url('../images/uitklapmenubg.png') repeat #818a8f;
	width: 250px;
	z-index: 150;
	min-height:100px;
	
}

div#menuknop .onderliggendmenu:hover .onderliggend  {
	display: block;
}

 

[ScorpionX]

kun je ook de html posten?

 

[joery90]

html

<div id="menu">
			<div id="menuknop">
			<ul>
				<li class="active onderliggendmenu"><a href="index.html"><span>HOME</span></a>
					<ul class="onderliggend">
						<li><a href="#">TEST</a></li>
						<li><a href="#">Test</a></li>
						<li><a href="#">TEst</a></li>
					</ul>
				</li>
				<li><a href="#"><span>DIENSTEN</span></a></li>
				<li><a href="#"><span>KLANTEN</span></a></li>
				<li class=" onderliggendmenu"><a href="#"><span>OPLOSSINGEN</span></a>
				<ul class="onderliggend">
						<li><a href="#">Van den Dool beveiliginstechniek</a></li>
						<li><a href="#">Van den Dool Elektrotechniek</a></li>
						<li><a href="#">Van den Dool Engineering</a></li>
					</ul>
				</li>
				<li><a href="#"><span>VOORBEELDEN</span></a></li>
				<li class="onderliggendmenu"><a href="#"><span>OVER VAN DEN DOOL</span></a>
					<ul class="onderliggend">
						<li><a href="#">Van den Dool beveiliginstechniek</a></li>
						<li><a href="#">Van den Dool Elektrotechniek</a></li>
						<li><a href="#">Van den Dool Engineering</a></li>
					</ul>
				</li>
				<li><a href="#"><span>CONTACT</span></a></li>
				<li><a href="#"><span>INLOGGEN</span></a></li>
			</ul>
			</div>
		</div>

 

[ScorpionX]

hmm moeilijk te testen, ik mis een hoop bestanden waardoor een een hoopje links word.

wel viel me op dat

li.active { background: url('../images/menuknopm.png') repeat-x;}
li.active  a{ background: url('../images/menuknopl.png') no-repeat left; height:36px; display: block; }
li.active  span  { background: url('../images/menuknopr.png') no-repeat right; height:36px; display: block; }

niet gekoppeld is aan een id of class. waardoor hij overal wordt toegepast.