hvordan laver jeg en dropdown menu?

hmm måske du kan klare det på den simple måde som dette:
http://www.alexkeeny.com/cssdropdown/

Istedet for en masse javascript

Det ser ellers fint nok ud, men jeg vil helst ikke styre min menu med css, da det ikke er alle browsere der viser det ens.

skal der kunne være flere nivueaer (ergo under-under-under-menuer)?

nej... bare som du ser det på billedet :o)
ved rollover på menulink, skifter bagrunden farve samtidig med dropdownboxen kommer frem. Når man kører ned over links'ene er det kun skriften der skal skifte farve, mens baggrunden forbliver gennemsigtig.
Menuen skal have en hvid border på 3 px.
Håber det kan lade sig gøre!!!

<style>
    .menu *
    {
        list-style-type:none;
        margin:0px;
        padding:0px;
        float:left;
        text-align:center;
      overflow:hidden;
        width:120px;
    }

.menu .header
{
        display:block;
        background-color:black;
        color:#FFF;
        width:118px;
}

.menu .items
{
        margin-top:2px;
        display:none;
        list-style-type:none;
        width:116px;
        text-align:center;
        background-color:gray;
}

.menu a
{
        color:#FFF;
        text-decoration:none;
  }
</style>
<ul class="menu" onmouseover="show('menu01')" onmouseout="hide('menu01')">
    <li><a href="#" class="header">Menu 1</a>
        <ul class="items" id="menu01" onmouseout="hide('menu01')" onmouseover="show('menu01')">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>
</ul>
<ul class="menu" onmouseover="show('menu02')" onmouseout="hide('menu02')">
    <li><a href="#" class="header">Menu 2</a>
        <ul class="items" id="menu02" onmouseout="hide('menu02')" onmouseover="show('menu02')">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
    </li>
</ul>

her er et link til en jeg har lavet... så kan man selv designe div'erne individuelt og sætte baggrunden til tranparent med css og bruge alt den html inde i de dropdowns man har lyst til :) http://www.eksperten.dk/spm/702784#rid6207873

- den placerer sig selv automatisk baseret på relativ og absolut placerings beregning...
hideshowdiv('menu1',this,0,0) <- for placering lige ovenpå objektet
hideshowdiv('menu1',this,'d','d') <- for placering lige under objektet
hideshowdiv('menu1',this,100,200) <- for placering 100px mod højre og 200 pixels nede i forhold til objektet (dropdown menu f.eks.)
hideshowdiv('menu1',this,-100,-200) <- for placering 100px mod venstre og 200 pixels oppe i forhold til objektet

- div'en (dropdown'en) forsvinder automatisk igen når man bevæger musen up af den div der er dukket frem eller knappen der fik div'en til at dukke frem :)
... lidt længere forklaring inde i den nævnte tråd :P

instillingen med 'd','d' er det samme som dropdown :)

med hensyn til at den øverste knap skal være en anden farve mens dropdown menuen er synlig kan det integreres i scriptet eller man kan vælge placeringen 0,0 og have en udgave menupunktets knap inde i dropdown div'en også ... som bare har den anden farve...

til mit lille supersimple menu mangler denne lige
<script type="text/javascript">
function show(sMenu){
  document.getElementById(sMenu).style.display = "block"
}
function hide(sMenu){
  document.getElementById(sMenu).style.display = "none"
}
</script>

...css  og html ...

( Grunden til jeg lavede min indviklet var, at hvis man indsætter en linje under horsmark's eksempel, så rykker det nedenstående indhold nedaf, når man kører over et menupunkt... )

men løsningen på det er jo bare at placere menuen som absolute :)

mcclemens>> ...ja det er så tilrettet pga dig *GG* :-)
http://sitemark.net/development/dropdown.php

[ ja det er så tilrettet pga dig *GG* :-) ]
Lækkert nok :D ... Optimal til formålet ;)

Lige 3 css finjusteringer
for at komme tættere på
www.avissats.dk/menu

.menu .items a
tilføjes: color:#000;

.menu a:hover
tilføjes: background:gray;

og denne css tilføjes: .items li a:hover{color:#FFF;}

Det er en fin og simpel menu. Problemet er at den kun virker ordentlig på PC. Når jeg tester den på mac i henholdsvis Safari, Firefox og Internet Explorer opstår der problemer. Roll over effekten virker ikke, det er svært at vælge undermenuerne ordenligt og i IE ligger menuerne underhinanden istedet for ved siden af hinanden.

Jeg kunne godt tænke mig at arbejde videre med denne løsning, men er det muligt at løse nogle at de ovennævnte problemer så siden kommer til at køre problemfrit overalt?

msamsing >> hvilken kode bruger du ?

Jeg har brugt din kode http://sitemark.net/development/dropdown.php

horsmark >> jeg har gået videre med din kode, men nu ser jeg at der en lille ting jeg ikke havde forudset. Internet Explorer går som standard ind og blokere for undermenuerne. Jeg ved godt at man hurtigt kan slå dette fra, men synes det er temlig bøvlet hvis samtlige brugere skal til dette +  der er evt. enkelte brugere der ikke rigtig ved hvad de skal gøre.
Er det muligt at undgå denne blokerings advarsel på anden vis?

øhh ???? link ?

lyder fame underligt ?

Når jeg åbner min side (ligger lokalt på pc'en) kommer der en advarsel frem med følgende tekst:
"Internet Explorer har begrænset denne fil i at vise aktivt indhold, der evt. ville kunne få adgang til din computer, for at hjælpe med til at beskytte din sikkerhed. Klik her for indstillinger..."

Kan man undgå dette? og er det kun fordi dokumentet ligger lokalt?

det er fordi det ligger lokalt :-)

Hej igen!
Når jeg sætter flere menupunkter ind, er det stadig kun det første punkt der kommer frem... Hvad går der galt! Vil du checke om jeg har gjort noget forkert? www.avissats.dk/menu

Slet height i denne css:

    .menu *
        {
            position:relative;
            list-style-type:none;
            margin:0px;
            padding:0px;
            border:0px;
            float:left;
            text-align:center;
            width:120px;
            display:inline;
        }

prøv lige at ændre din style til følgende:

    <style type="text/css">
    html, body
    {
        margin:0px;
        padding:0px;
    }

    h1, p {
        margin:0px;
        padding:0px;
        clear:both;
    }

    .menu *
        {
            position:relative;
            list-style-type:none;
            margin:0px;
            padding:0px;
            border:0px;
            float:left;
            text-align:center;
            width:120px;
            height:20px;
            display:inline;
        }

    .menu .header
    {
            background-color:black;
            color:#FFF;
            width:118px;
            height:20px;
            display:inline;
            overflow:hidden;
            font-family: Arial, Verdana, Helvetica, sans-serif;
    }

    .menu .items
    {
            position:absolute;
            top: 20px;
            left: 2px;
            display:none;
            list-style-type:none;
            text-align:center;
            background-color:gray;
            opacity: 0.9;
            filter: alpha(opacity=90);
            -moz-opacity:0.9;
            height:auto;
            width:115px;
            overflow:hidden;
    }

    .menu a
    {
            font-weight:bold;
            height:20px;
            color:#000;
            text-decoration:none;
      }

    .menu a:hover
    {
            background-color:gray;
          color:#FFF;
            text-decoration:none;
      }

      .menu .items a
    {
        filter:alpha(opacity=100);
        opacity: 1;
        -moz-opacity:1;
        overflow:hidden;
    }
    </style>

mclemens >> jeg mener at grunden til at jeg måtte sætte height på menu containeren er at ellers tolker IE og firefox højden af containeren forskelligt ...

horsmark>> min menu ser nu således ud www.avissats.dk/menu
Jeg kunne godt tænke mig at det var lidt nemmere at vælge underpunkterne - det er somom den springer væk igen når man skal til at vælge...

tilret dit items css til følgende:

    .menu .items
    {
            position:absolute;
            top: 20px;
            left: 0px;
            display:none;
            list-style-type:none;
            text-align:center;
            background-color:#ccCCCC;
            opacity: 0.9;
            filter: alpha(opacity=90);
            -moz-opacity:0.9;
            height:auto;
            width:118px;
            overflow:hidden;
            font-family:Arial, Verdana, Helvetica, sans-serif;
            font-size:12px;
            line-height:30px;
            border-top:2px solid #FFF;
    }

horsmark >> menu'en er nu sat ind i mit dokument www.monner.dk/test2 og nu vil jeg så høre om det er muligt at venstrestille den?

Desuden har menu'en en tendens til at blive "hængende" når man trækker i størrelsen på vinduet. Hvis man dernæst køre over menu'en springer den på plads igen... hvorfor sker dette?

1. venstrestille indhold (items) ?
2. øhh kan du forklare nærmere ?

1. jeg vil gerne ha menuen til at starte helt til venstre i min celle, men der er et mellemrum på en 40-50 px inden menuen starter - kan man ikke fjerne det mellemrum? hvis du tjekker din egen http://sitemark.net/development/dropdown.php så starter menuen også lidt længere til højre end teksten over og under.

2. hvis du bruger internet explorer og kigger på www.monner.dk/test2 så sker der et eller andet med menuen når man trykker på gendan fra maksimer i øverste højre hjørne af vinduet og trækker den op eller ned i størrelse. Hele indholdet flytter sig, mens menuen bliver samme sted hele tiden.

1. indsæt dette
ul.menu {
  margin:0px;
  padding:0px;
  border:0px;
  }

2. Kan ikke genskabe fejlen ?

Horsmark >> Det ser jo rigtig fint ud efterhånden :o)

Så vidt jeg kan se er der kun et problem nu! Hvis du prøver at kigge på www.monner.dk/test2, så prøv at trække i browservinduet... du vil nok opleve at menuen bliver stående vertikalt mens alt andet rykker sig. Først når man kører musen henover menuen, hopper den på plads. Tror du det kan rettes - Du må iøvrigt gerne smide et svar!

hmm kan altså ikke genskabe fejlen *hmm*

MEN en løsning kan være hvis du sætter følgende på den div menuen er sat ind i
<div style="height:20px;"> -> <div style="height:20px;white-space:nowrap;">

måske ?

Hej horsmark!
Unskyld jeg først skriver tilbage nu... Dit forslag virkede desværre ikke, men det er jo heller ikke nemt at løse et problem man ikke kan se :o)
Tak for hjælpen! _ Her er dine velfortjente point!
Mvh msamsing