Avatar billede treepeert Nybegynder
12. februar 2008 - 17:40 Der er 4 kommentarer og
1 løsning

DropDown Menu

Hej!

Jeg har efter et par desperate dages forsøg, fået lavet noget der ligner en drop down menu, udelukkende ud af CSS og HTML.

Mit problem er så bare, at ikke alle "gamle" Explore kan køre denne opsætning.

Den er bla. baseret på :hover funktionen.

Er der nogen nemmere måde at lave en simpel dropdown menu med undermenuer, som fungere i de mest elementære browsere?

Tjek siden ud og se på sourcen.  www.treepeert.com/forside.php
Neden for er min CSS:

________________________________________________________________

/* CSS Document */

body
{
    background:#CCCCCC;
    font-family:"Times New Roman", Times, serif;
}

a
{
    color:#000000;
    outline:none;
    text-decoration:none;
}

a:hover
{
    text-decoration:underline;
}

a.mailto
{
    text-transform:none;
   
}

#note
{
    font-family:Poor Ricahard;
    font-size:14px;
    color:#00CC00;
    font-weight:bold;
}

#global
{
    width:900px;
    height:100%;
    margin:0px auto;
    border:2px solid;
}

#globaltable
{
    width:100%;
}

#tr-top
{
}

#tr-top_table-overskrift
{
    width:100%;
}

#tr-top_table-overskrif_tr1
{
    height:30px;
}

#tr-top_table-overskrift_tr2
{
    height:30px;
}

#tr-top_table-overskrif-tr2_table-menu
{
    width:100%;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;   
}

#tr-top_table-overskrif-tr2_table-menu ul
{
    margin: 0; padding: 0; height:25px; width:120px;
}

#tr-top_table-overskrif-tr2_table-menu li
{
    position:relative; list-style:none; margin: 0;
    padding-top:3px;
    width:auto;
}

#tr-top_table-overskrif-tr2_table-menu ul ul
{
    top:-10px;
    left:110px;
    display:none;
}

#tr-top_table-overskrif-tr2_table-menu ul.niveau1 li.sub:hover ul.niveau2,
#tr-top_table-overskrif-tr2_table-menu ul.niveau2 li.sub:hover ul.niveau3
{
    display:block;
}

#tr-content
{
    height:400px;
}

#tr-content_globaltable
{
    width:100%;
    height:100%;
}

#tr-content_globaltable_tr-overskrift
{
    font-size:16px;
}

#tr-bottom
{
}

#tr-bottom_globaltable
{
    height:50px;
    width:100%;
    border-top:1px solid #000000;
}

#tr-bottom_globaltable_tr1
{
}

#tr-bottom_globaltable_tr1_td1
{
    font-size:14px;
}

#tr-bottom_globaltable_tr2
{
}

#tr-bottom_globaltable_tr2_td2
{
    font-size:14px;
}

#tr-bottom_globaltable_tr2_td3
{
    font-size:14px;
}
Avatar billede jarner Nybegynder
12. februar 2008 - 17:53 #1
mener du kan benytte dig af javascript's onmouseover

se fx. http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm
Avatar billede Keld Nielsen Professor
12. februar 2008 - 17:55 #2
Prøv at kigge på den her side: http://webdesign101.dk/www/cssmenu/dropdownmenu.php

...der er mange gode eksempler, lige til at bruge, alle lavet i CSS.
Avatar billede tolveren Nybegynder
12. februar 2008 - 18:03 #3
Avatar billede treepeert Nybegynder
13. februar 2008 - 09:35 #4
Skulle helst ikke have java/script ind i det.

fotograf: Det er fra nettop denne side jeg har fundet frem til mit resultat.
Avatar billede treepeert Nybegynder
29. februar 2008 - 10:37 #5
Intet brugbart resultat.
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