Beginnersvraag dropdownmenu: probleem met subsub-menu

Status
Niet open voor verdere reacties.
A

andriesluchies

Gebruiker
Lid geworden
30 okt 2009
Berichten
41
Ik ben een totale noob voor wat betreft html/css maar wil graag de website die ik voor mijn onderneming in elkaar heb gezet met een WYSIWYG-builder handmatig omzetten in eigen geschreven html/css. Recent ben ik begonnen met een sjabloontje van een dropdownmenu van suckerfish maar stuit ik op problemen wanneer ik een subsub, en eventueel later subsubsub-onderdeeltjes, in wil brengen (krijg het gewoon niet voor elkaar!!!). Ergens binnen het css gaat het volgens mij niet helemaal goed, maar wellicht mankeert er ook iets aan het HTML. Ik heb beide even bijgevoegd, misschien dat iemand even wil kijken waar ik in de fout ga.

Alvast bedankt voor de hulp!

HTML
<ul id="nav">
<li><a href="#">Diensten</a>
<ul>
<li><a href="#">Debiteuren in Balans</a>
<ul>
<li><a href="#">Debiteurenbeheer</a></li>
<li><a href="#">Incasso</a></li>
<li><a href="#">Consultancy en Auditing</a></li>
<li><a href="#">Detachering</a></li>
<li><a href="#">Informatie</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Publicaties</a>
<ul>
<li><a href="#">Links</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Artikelen</a></li>
</ul>
</li>
<li><a href="#">Ik en mijn klanten</a>
<ul>
<li><a href="#">Wie ben ik</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Contactformulier</a></li>
</ul>
</li>
</ul>

CSS

#nav{position:relative;top:-390px;left:-1.2px}
#nav, #nav ul{padding:0;margin:0;list-style:none;line-height:1}
#nav li{float:left;width:197px}
#nav li ul ul{margin:-1em 0 0 10em}
#nav ul{position:absolute;width:160px;left:-2000px}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul{left:auto;background-position: 0 0}
#nav li:hover ul ul, #nav li.sfhover ul ul{left:-999em}
#nav a{display:block;margin:2px 5px 3px 5px;text-decoration:none;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:0.7em}
ul a{font-weight:normal;color:#E6E6E6;cursor:#}
ul ul a:link, ul ul a:visited{font-weight:normal;color:#680000;cursor:#}
ul ul a:hover, ul ul a:active{font-weight:normal;color:#680000;cursor:#}
ul li{background-color:#680000;border-left:3px solid #FFF}
ul ul li{background-color:#E6E6E6;border-top:3px solid #FFF;border-left:0}
/* IE only hack \*/
* html ul li, * html ul ul li{border-bottom:3px solid #FFF}
* html ul ul li{border-top:0;}
/* Einde IE only hack */
 
Hier zitten al sub sub onderdelen in? Ik snap je niet helemaal kun je iets duidelijker zijn
 
Jawel, op een of andere manier verschijnen de subonderdelen niet wanneer ik de pagina in de test zet. Ergens gaat er volgens mij iets niet helemaal goed in het css-bestand (of in het HTML-bestand) alleen kan ik turen naar het scherm tot ik een ons weeg, 'ik zie het niet'. Wellicht dat jij na het doorkijken van de codering iets kunt vinden. Ik heb zelf het vermoeden dat er iets niet helemaal goed gaat in het css-gedeelte, maar waar zit het probleem?
 
#nav{position:relative;top:-390px;left:-1.2px}

Hier zit de fout haal de - is weg ;) (Bij top)
Sorry voor het late antwoord moest werken
 
Zal het vanavond even proberen maar volgens mij heb ik dat gewoon ingebracht voor de positionering van het dropdown-menu!. Zoals ik al zie, zal het proberen en even bekijken of daar inderdaad het probleem zit.
 
Dat weghalen van -390px heeft alleen effect op de positionering van het dropdownmenu!. Probleem zit hem toch ergens anders, maar waar?; nog iemand ideeen?
 
Ik denk dat dit is wat je ongeveer bedoeld :D

wat er fout ging
HTML: 
<ul id="nav">
	<li><a href="#">Diensten</a>
	<ul><!-- deze hoeft hier niet kan weg  -->
		<li><a href="#">Debiteuren in Balans</a><!-- deze kan binnen de volgende ul -->
		<ul>
                        hier kan de  debiteuren in balans
			<li><a href="#">Debiteurenbeheer</a></li>
			<li><a href="#">Incasso</a></li>
			<li><a href="#">Consultancy en Auditing</a></li>
			<li><a href="#">Detachering</a></li>
			<li><a href="#">Informatie</a></li>
		</ul>
		</li><!-- deze hoeft hier niet kan weg  -->
	</ul><!-- deze hoeft hier niet kan weg  -->
	</li>
	<li><a href="#">Publicaties</a>
	<ul>
		<li><a href="#">Links</a></li>
		<li><a href="#">Downloads</a></li>
		<li><a href="#">Tools</a></li>
		<li><a href="#">Artikelen</a></li>
	</ul>
	</li>
	<li><a href="#">Ik en mijn klanten</a>
	<ul>
		<li><a href="#">Wie ben ik</a></li>
		<li><a href="#">Testimonials</a></li>
	</ul>
	</li>
	<li><a href="#">Contact</a>
	<ul>
		<li><a href="#">Contactformulier</a></li>
	</ul>
	</li>
</ul>

De aangepaste html met comment
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Submenu</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	
	<style type="text/css">
	
	body {	
		font: normal 13px 'Arial';
		line-height: 18px;
		margin: 0;
		padding: 0;
	}
	
	
	#page {
		position: relative;
		width: 960px;
		margin: 0 auto;
	}
	
	/* alle unorderd lists */
	ul {
		margin: 0;
		padding: 0;
		list-style: none;	
	}
	
	
	/* menu */
	#nav {
		width: 960px;
		height: 40px;
		background-color: red;
	}
	
		/* alle list items */	
		#nav li {
			float:left; /* door de float word hij automatisch block */
			height: 40px;
		}
			
			/* alle linkjes */
			#nav li a {
				position: relative;
				display: block;
				height: 14px; /* hoogte is 14 line height ook dit voor de padding */
				font-size: 14px;
				line-height: 14px;
				padding: 13px; /* 2x 13(padding) = 26 + 14(hoogte tekst/line-height) = 40 hoogte van de #nav */
				color: #FFF;
				text-decoration: none;
			}
			
			/* linkjes als je er over heen gaat alleen wat anders is opgeven */
			#nav a:hover {
				background-color: #e9e9e9;
				color: #000;
			}
			
			/* submenu */
			#nav ul {
				position: absolute; /* absolute t.o.v de parent in dit geval de #nav li a  want deze heeft relative */
				top: 40px; /* afstand vanaf de top hoogte van #nav */
				background-color: red;
				display: none;
			}
			
			/* als je over een list item heen gaat submenu block geven word deze zichtbaar */
			#nav li:hover ul{
				display: block;
			}
				
				/* list itmes in het submenu */
				#nav ul li{
					float:none;
					border-bottom: 1px solid #000;
				}
					
					/* laatste list item van submenu geen border geven */
					#nav ul li:last-child {
						border: 0;
					}

	</style>
	
	
	<body>
		<div id="page">
		
			<ul id="nav">
				<li><a href="#">Diensten</a>
					<ul>
						<li><a href="#">Debiteuren rerthrthtrhrthrthrthtr hrthinBalans</a></li>
						<li><a href="#">Debiteurenbeheer</a></li>
						<li><a href="#">Incasso</a></li>
						<li><a href="#">Consultancy en Auditing</a></li>
						<li><a href="#">Detachering</a></li>
						<li><a href="#">Informatie</a></li>
					</ul>
				</li>
				
				<li><a href="#">Publicaties</a>
					<ul>
						<li><a href="#">Links</a></li>
						<li><a href="#">Downloads</a></li>
						<li><a href="#">Tools</a></li>
						<li><a href="#">Artikelen</a></li>
					</ul>
				</li>
				
				<li><a href="#">Ik en mijn klanten</a>
					<ul>
						<li><a href="#">Wie ben ik</a></li>
						<li><a href="#">Testimonials</a></li>
					</ul>
				</li>
				
				<li><a href="#">Contact</a>
					<ul>
						<li><a href="#">Contactformulier</a></li>
					</ul>
				</li>	
			</ul>		
		
		</div>
	</body>
</html>

succes :D
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan