Avatar billede stonejunkie Nybegynder
28. december 2005 - 16:02 Der er 1 kommentar og
1 løsning

Dropdown menu i 3 levels

Jeg har nu i lang tid sidet og fedtet med at få min dropdown menu til at virke korrekt, men desværre uden held. Jeg har fulgt denne guide (http://www.alistapart.com/articles/horizdropdowns/). Jeg vil dog gerne have 3 levels og har derfor tilføjet en <ul> sektion mere i min kode. Mit problem er når jeg kører musen over et element i level 1 så vises alle de tilhørende 3 levels.

Jeg håber der er nogen der kan hjælpe for jeg er ikke nogen CSS haj.

Eksempel på min menu kan ses her
http://users.cybercity.dk/~dsl195400/menu.html

Her er min kode:

<script language="javascript">
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;
</script>

<style type="text/css">

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }

ul li {
    position: relative;
    }
   
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul, li.over ul {
    display: block;
}

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

</style>

<ul id="nav">

<li><a href="">Level1</a></li>
<li><a href="">Level1</a></li>
<li><a href="">Level1</a>
    <ul>
        <li><a href="">Level2</a></li>
        <li><a href="">Level2</a></li>
        <li><a href="">Level2</a>
            <ul>
                <li><a href="">Level3</a></li>
                <li><a href="">Level3</a></li>
            </ul>
        </li>
        <li><a href="">Level2</a></li>
    </ul>
</li>
<li><a href="">Level1</a></li>
<li><a href="">Level1</a>
    <ul>
        <li><a href="">Level2</a></li>
        <li><a href="">Level2</a></li>
    </ul>
</li>
<li><a href="">Level1</a></li>

</ul>
Avatar billede stonejunkie Nybegynder
28. december 2005 - 18:10 #1
Yeeahhh fandt selv denne artikel som løser mit problem.

Her er linket til interesseret:
http://www.nickrigby.com/article/11/drop-down-menus-horizontal-style-pt-2
Avatar billede stonejunkie Nybegynder
28. december 2005 - 18:11 #2
Jeg snupper lige selv pointene.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester