Print

[js]

Beste Frances,

Ik ben al een hele tijd bezig met mijn uitklap menu maar het wil maar niet lukken...
Hij werkt wel maar er staat een stip voor het woord waar hij moet gaan uitklappen.
Ik denk dat dit betekend dat er ergens nog een klein foutje zit.
Ik heb hem al gevalideerd en volgens w3c moet de fout in dit stukje zitten:


<ul id="menu">
        <li><a href="http://www.ajax.nl">Interesses</a>
        <ul>
        <li><a href="http://www.deds.nl/~jorisslatman/project/sport.html">Sport</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/muziek.html">Muziek</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/film.html">Film</a></li>
        </ul>
        </li>
</ul>

de rest van mijn menu is :

<ul id="menubalk">
    <li><a href="http://www.deds.nl/~jorisslatman/project/moodboard.html">Moodboard</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/biografie.html">Biografie</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/interview.html">Interview</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/portfolio.html">Portfolio</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/flash.html">Flash-Film</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/links.html">Links</a></li>
    </ul>
</ul>
 
Mijn css is verder ook in orde :


#list li {
   background-color:#000;
   padding-left:10px;   
   float:left;
   color:#FFF;
   border-top: 1px solid #FFF;
   border-bottom: 1px solid #FFF;
   border-right: 1px solid #FFF;
   border-left: 1px solid #FFF;
   border-color:#999;
   padding-right:10px;
   width:10%;
   position:relative;
   padding-top:5px;
   padding-bottom:5px;
}
#menu li ul {
   padding-left:0px;
   margin-left:0px;
   position:absolute;
   width:100%;
   left:-999em;
   top:1.5em;   
   list-style-type:none;
}
#menu li:hover {
   background-color:#000;
}
#menu li li {
   float:none;
   width:100%;
   list-style:none;
   list-style-type:none;
}
#menu li:hover a {
   color:#FFF;
}
#menu li:hover ul {
   left:0;
}

Zou iemand me met mijn probleem kunnen helpen???
alvast bedankt!

[Frances]

Ik zie geen  fout in het eerste deel maar wel in het tweede deel:

<ul id="menubalk">
    <li><a href="http://www.deds.nl/~jorisslatman/project/moodboard.html">Moodboard</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/biografie.html">Biografie</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/interview.html">Interview</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/portfolio.html">Portfolio</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/flash.html">Flash-Film</a></li>
        <li><a href="http://www.deds.nl/~jorisslatman/project/links.html">Links</a></li>
    </ul>
</ul>

De ingesloten lijst staat buiten de li.
Misschien dat dat het oplost. Als je de url meestuurt kan ik (of iemand anders :-) het probleem in de pagina zelf bekijken.

[js]

dit zijn ze :

[js]

http://home.deds.nl/~jorisslatman/project/index.html
ik moet er wel bij zeggen dat ik hem aan het testen ben in firefox

[js]

Ik heb het al gevonden !
ik bleek een list style type ergens niet te hebben gezet...