[CSS] - dropdown submenu werkt niet goed

[Verwijderd]

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:

code:

   <!-- Navigation item -->
          <ul>
             <li><a href="#">Almelo Sociaal<!--[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 zelf het vermoeden dat er wat zinnen bij de CSS in moeten, maar weet niet goed wat.

[bartbh]

Bekende vragen: wat heb je zelf al gedaan om het op te lossen? Kun je een uitgeklede testcase online zetten? (jsfiddle.com bijvoorbeeld)

Om op je probleem uit te komen, het lijkt mij dat de de position van je 2e (of 3e) ul aan moet passen zodat deze wat meer naar rechts verschuift.

Of je dat nu doet op basis van een extra class of op basis van "ul in ul" mag je zelf ff uitzoeken.

[Verwijderd]

Bedankt voor je reactie, maar wat bedoel je precies met de 2e of 3e ul?

[C0rnelis]

Verwijderd schreef op zaterdag 07 april 2012 @ 11:38:
Bedankt voor je reactie, maar wat bedoel je precies met de 2e of 3e ul?

In html heb je elementen genest:

HTML:

<ul> <!-- eerste UL -->
        <li>Almelo Sociaa
                <ul> <!-- tweede UL -->
                        <li>Wie zijn we?
                                <ul> <!-- derde UL -->
                                        <li>test?</li>
                                </ul>
                        </li>
                        <li>Wat doen we?</li>
                        <li>Organisatie</li>
                        <li>Nieuws</li>
                        <li>Activiteiten</li>
                        <li>Afsprakenlijst</li>
                </ul>

[BtM909]

Verwijderd schreef op zaterdag 07 april 2012 @ 11:38:
Bedankt voor je reactie, maar wat bedoel je precies met de 2e of 3e ul?

Heb je überhaupt wel verstand van wat je aan ' t doen bent? Door het niet aangeven wat je allemaal zelf hebt geprobeerd, is het niet duidelijk of je de materie snapt of gewoon lui bent

Even duidelijker aangeven wat je hebt geprobeerd en waar je denkt waar het probleem aan zou kunnen liggen.

[_Erikje_]

Misschien een idee om iets kant en klaar te pakken

Puur html/css
Op basis van jQuery
Op basis van Mootools

Genoeg keus dus, waarom opnieuw het wiel uitvinden (en IE6 lekker te draaien)...