Hallo!

Ik ben bezig met een dropdown te implenteren in mijn menu, maar het wil nog niet helemaal lukken. Bij een mouseover komen er al extra links, maar niet op de plaats waar ik ze wil hebben (gewoon onder het menuitem).

Hier een online voorbeeld:
http://lfdesigns.myartsonline.com/de...e/archief.html

Dit is de structuur in mijn html:

Code:

<ul>
                  <li><a href="index.html">Home</a></li>
                <li class="active"><a href="archief.html">Spelersarchief</a></li>
                <li><a href="competitie.html">Competitie</a></li>
                <li><a href="knvbbeker.html">KNVB-Beker</a></li>
                <li><a href="europacup.html">Europacup</a></li>
                <li><a href="nlsupercup.html">NL-Supercup</a></li>
                <li><a href="dekuip.html">De Kuip</a></li>
                <li><a href="chatroom.html">Chatroom</a></li>
                <li><a href="links.html">Links</a></li>
                    <ul>
                        <li><a href="#">sub1</a></li>
                        <li><a href="#">sub2</a></li>
                        <li><a href="#">sub3</a></li>
                    </ul>
                <li><a href="ezine.html">EZine</a></li>
                  <li><a href="contact.html">Contact</a></li>
</ul>

En dit is het CSS-gedeelte van het menu:

Code:

ul  {
    margin : 0px;
    list-style : none;
    text-align:right;
    padding:0;
    width:700px;
    height:19px;
}

ul li {
    margin : 0;
    padding: 0;
    text-transform:uppercase;
    display:inline;
    height:19px;
    position:relative;
}

li ul {
    position: absolute;    
    list-style : none;
    left: 0px;
    top: 50px;
    display: none;
}

li:hover ul, li.over ul { 
    list-style: none;
    display: inline;
    background: #fff;
    width: 150px;
    heihgt: 25px;
    border-bottom:#999999 1px;
    float: none;
}


ul li a {
    float : left;
    height: 17px;
    margin-left : 6px;
    margin-right : 6px;
    text-align:center;
    text-decoration : none;
    font-size : 10px;
    font-family: "Gill Sans MT", Arial, sans-serif;
    color : #ff0000;
    padding-top: 3px;
    display: block;
}

ul li a:hover {
    text-decoration : none;
    color : #545454;
}

ul li a:visited:hover {
    text-decoration : none;
    color : #545454;
}

#menu .active a {
    float : left;
    background:#ffffff;
    padding-left:6px;
    padding-right:6px;
    text-align:center;
    text-decoration : none;
    font-size : 10px;
    color : #000;
    padding-top: 3px;
    height:17px;
}

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
    (" over", "");
   }
   }
  }
 }
}
window.onload=startList;

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Wat moet ik doen? !?

Alvast bedankt!
Luc Faelens

Je dropdown werkt helemaal niet. Bij mij op Firefox3 zijn de hovers
direct te zien en niet nadat ik met m'n muis over een hoofdlink ga.

Ik zie dat je ook helemaal geen Javascript gebruikt? Goed werkende
dropdowns gebruiken volgens mij altijd javascript?
Ik zou een heel ander dropdown script opzoeken als ik jouw was.

O inderdaad! Ik had alleen nog in IE gekeken, maar nu zie ik dat hij helemaal niet werkt. Ik zal kijken of ik ergens een gratis javascript dropdown kan vinden. Of weet iemand er misschien een? Zou graag willen dat hij ook aan een css gekoppeld wordt.

ik had laatst ookal zo'n dropdown menu gepost (ter verduidelijking het gaat wel om een horzintaal dropdown menu)

http://birdwebdesign.nl/menu.html

zonder JS, puur html en css