Submenu in dropdown meunu werkt niet goed

Status
Niet open voor verdere reacties.
B

Boris2011

Nieuwe gebruiker
Lid geworden
5 apr 2012
Berichten
4
Ik ben bezig met het maken van een website en nu heb ik een dropdown menu daarin zitten en die werkt prima.
Nu wil ik echter een submenu onder enkele menus van het dropdown maken, maar dat doet hij niet.
Hij zet het menu er letterlijk onder.


Op onderstaand plaatje kun je zien wat ik bedoel: "test" hoort een subkopje te zijn van "wie zijn we?", maar wordt er gewoon onder geplaatst.



Ik heb hiervoor de volgende html codes gebruikt:
HTML: 
   <!-- Navigation item -->
          <ul>
             <li><a href="#">##<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
                  <ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
                  <li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
                  <li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
                  <li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
                  <li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
                  <li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
                </ul>

En de volgende dropdown gegevens heb ik in de css gevonden:

Code: 
/*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/

Kan iemand mij vertellen wat ik fout doe en hoe ik dit dropdown menu werkend kan krijgen?
Ik heb het vermoeden dat er wat zinnetjes bij de CSS moeten, maar ik zou niet weten wat en hoe.
 
Laatst bewerkt:
Kan niemand me helpen? Desnoods tegen een kleine vergoeding.
Volgens mij moet het niet zo ingewikkeld zijn, maar staat er gewoon iets niet goed in de CSS.

Wie wil voor 10 euro het dropdown menu fixen?
het gaat om de volgende website: weggehaald

Laat me graag zsn mogelijk weten!
 
Laatst bewerkt:
Hoi Boris2011,
Op dit moment hebben de sub-submenu's nog geen eigen style die ze anders maakt dan de submenu-elementen.
Ik denk dat het iets zal moeten worden in deze geest:
Code: 
.nav2 ul ul ul { 
    position: absolute; 
    top: 0 !important; 
    margin-top: 0 !important; 
    left: 10em !important; 
    margin-left: 33px; 
    z-index: 10 !important;
    }
Nog wel te testen in verschillende browsers!

Met vriendelijke groet,
CSShunter
 
Dit is al geweldig, er zijn alleen nog twee dingetjes waarvan ik bij god niet weet hoe ik ze kan aanpassen:
- de submenu's beginnen nu gelijk bovenaan, hoe krijg je het dat de op de juiste hoogte beginnen, aansluitend bij het menu? (zie website)
- de submenu's zijn standaard zichtbaar, hoe kun je ervoor zorgen dat ze alleen zichtbaar zijn als je met de muis het menu volgt?

de volgende codes heb ik dan nu gebruikt:
HTML: 
 <li><a href="#">KRA<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="kra.html"target="iframe">Wie zijn we?</a></li>
                  <ul> <li><a hreft="#" target="iframe">TEST</a></li></ul>
                  <li><a href="krawatdoenwe.html"target="iframe">Wat doen we?</a></li>
                  <li><a href="kraspreekuren.html"target="iframe">Spreekuren</a></li>
                  <li><a href="kraactueel.html"target="iframe">Actueel</a></li>
                 <li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
                   <li><a href="kradocumenten.html"target="iframe">Documenten</a></li>
               <ul>
                <li><a href="#">Nieuwsbrieven</a></li>
               <ul>
               <li><a href="#">Sociale dienst</a></li>
                <li><a href="#">CliP</a></li>
                <li><a href="#">Landelijke Clientenraad</a></li>
                </ul>
				<li><a href="#">Verordeningen</a></li>
                <li><a href="#">Overige documenten</a></li>
                </ul>
                  <li><a href="kralinks.html"target="iframe">Links</a></li>
                  <li><a href="kracontact.html"target="iframe">Contact</a></li>
                </ul>
              <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>

Code: 
/*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(248,248,248);}
.nav2 ul li ul {display:none; border:none;}
.nav2 #item2SubList a {width: 125px; /* varies with the main menu item width */}
.nav2 ul ul ul { 
    position: relative; 
   	top: 0 !important; 
    margin-top: 0 !important;  
    left: 10em !important; 
    margin-left: 33px; 
    z-index: 0 !important;}


/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/


/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/

Zou je me daarmee ook nog willen helpen?
 
Laatst bewerkt:
Hoi Boris,
Het heeft even geduurd, maar daar ben ik dan weer. Ik kom tot de volgende bevindingen over het menu:
  1. In de html-code zit de menu-structuur niet volgens de regelen der kunst in elkaar. De <ul> van een submenu mag niet zelfstandig binnen een andere <ul> staan, maar moet binnen een list-item <li> vallen (maar wel buiten de de link <a> van dat list-item).
  2. In de css ontbraken wat dingen: het standaard onzichtbaar maken van de submenu's, en het mechaniekje om ze bij een hover over een list-item tevoorschijn te toveren. - Daarom is een goede html-opbouw ook essentieel: zo lang je over een <li> hovert, wordt de <ul> daarbinnen zichtbaar.
  3. Verder zou ik de derde laag van submenu's laten vervallen, zeker gelet op de gebruikers uit de betrokken doelgroepen. Die sub-sub-submenu's zijn: (a) onoverzichtelijk voor wie het niet gewend is, (b) erg lastig te bedienen voor mensen met weinig muis-ervaring en/of een verminderde hand-motoriek. Zelfs voor het tweede submenu moet je al erg goed zijn in het zuiver rechthoekig kunnen bedienen van de muis, anders floept je submenu weg.
(Ik snap het wel, en ken het ook uit eigen ervaring: bij zo'n koepel-organisatie staat alles te dringen om op de voorpagina en in het menu te komen. Maar voor de argeloze surfer wordt het al gauw een overdaad aan keuze-info, en is moeilijk de weg te vinden tussen de bomen en het bos. Dan kan je beter een tussenpagina hebben: een klik is sneller gemaakt dan navigeren over een uitgebreid dropdown-menu.)

Ad 1
De lijn van de html-structuur is deze:
HTML: 
<div class="nav2">
	<ul>
		...
		<li><a href="#">Kliënten Raad Almelo</a>
			<ul><!-- .nav2 li:hover ul -->
				<li><a href="kra.html" target="iframe">Wie zijn we?</a></li>
				<li><a href="krawatdoenwe.html" target="iframe">Wat doen we?</a></li>
				<li><a href="kraspreekuren.html" target="iframe">Spreekuren</a></li>
				<li><a href="kraactueel.html" target="iframe">Actueel</a></li>
				<li><a href="asactiviteiten.html" target="iframe">Activiteiten</a></li>
				<li><a href="kradocumenten.html" target="iframe">Documenten</a>
					<ul><!-- .nav2 ul ul li:hover ul -->
						<li><a href="#">Nieuwsbrieven</a></li>
						<li><a href="#">Verordeningen</a></li>
						<li><a href="#">Overige documenten</a></li>
					</ul>
				</li>
				<li><a href="kracontact.html" target="iframe">Contact</a></li>
			</ul>
		</li>
		...
	</ul>
</div>
Hierbij zijn de toevoegsels voor IE6 (inpakken in tabellen, via Conditional Comments) verwijderd: IE6 wordt tegenwoordig niet meer gebruikt (zit niet meer in de browser-statistieken). Ruim de helft van de IE-gebruikers zit op IE7 of IE8, de rest op IE9.

De sub-sub-submenu's zijn ook weggelaten. Op bv. de pagina KRA > Documenten > Nieuwsbrieven kunnen de 3 soorten waarschijnlijk wel goed gepresenteerd worden, of desnoods kan daar een submenu in staan met de drie op aparte pagina's

Ad 2
De sub-submenu's moeten onzichtbaar worden resp. zichtbaar worden bij een hover over het list-item waar ze in zitten:
Code: 
.nav2 ul li:hover ul ul,
.nav2 ul li:focus ul ul {
	display:none; 
	}
.nav2 ul ul li:hover ul,
.nav2 ul ul li:focus ul {
	display:block !important; 
	}
De styling van de sub-submenu's kan aangepast worden met bv. een blauw randje aan de linkerkant, zodat duidelijker is bij welk item ze horen:
Code: 
.nav2 ul ul ul {
	border-top: 1px solid #AFAFAF;
	border-right: 1px solid #AFAFAF;
	overflow: hidden;
	margin-top: -1px !important;
	padding-left: 5px;
	background: #0000FF;
	}
En ik zou in het algemeen zeker de mensen van dienst zijn die geen muis (kunnen) gebruiken, maar met de Tab-toets van link naar link op de pagina hoppen. Standaard hebben browsers daarvoor de "outline" van kleine stippelrandjes om de links. Maar o.a. in het menu vallen die door het kleurgebruik totaal niet op. Er kan toegevoegd worden:
Code: 
a:focus{
	outline: 2px dotted black;
	border: 1px solid white;
	}
Test-test-test!

... en er moet me nog wel van het hart dat het een <iframe> website is: in feite een één pagina-website. Niet zo gebruikersvriendelijk, en niet zo Google-geschikt. Op deze manier kan je bv. nooit een rechtstreekse link naar een pagina doorgeven: dan kom je op een geïsoleerde mini-pagina terecht zonder alles wat er omheen hoort aan menu, logo en zijkolommen.
Heb je al overwogen om er meteen een php-site van te maken? Dan heb je daar geen last van. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
wat geweldig, het werkt echt super. enorm bedankt! we zijn als vrijwilligers organisatie heel blij met je hulp!
 
Mooi zo! - De 10 Euri mag je in de koffiepot storten! ;)

En wat dacht je van het php-idee?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan