Absolute positie aan <ul> <li> voor menu (IE != FF)

[Technicality]

hallo WEB-tweakers,

Ik heb een probleem met absolute waarden voor UL elementen in mijn css. Ik heb de volgende geneste lijst:

HTML:

<ul class="aqdd">
    <li><a class="mainbutton" href="./info.php5">Informatie</a><br/>

        <ul>
          <li><a class="subbutton" href="./info.php5?page=contact">Contactinformatie</a></li>
          <li><a class="subbutton" href="./info.php5?page=route">Routeinformatie</a></li>
        </ul>
    </li>
    <li><a class="mainbutton" href="./prijzen.php5">Wij verzorgen:</a><br/>
        <ul>

          <li><a class="subbutton" href="./prijzen.php5?page=feestelijkheden">Feesten</a></li>
          <li><a class="subbutton" href="./prijzen.php5?page=vergaderingen">Vergaderingen</a></li>
        </ul>
    </li>
</ul>

met die classes doe ik nog niets, maar dat komt bij het uiteindelijke stylen.

Ik wil hiervan een menu maken met grote knoppen van 140x140px, waar je dan op klikt om vervolgens een submenu in die knop te krijgen. Eronder is makkelijk, maar erboven niet.
Ik heb het geprobeerd met de volgende CSS:

Cascading Stylesheet:

ul
{
  margin: 0;
  padding: 0;
}

li
{
  margin: 0;
  padding: 0;
}

ul.aqdd, .aqdd li ul
{
 list-style-type: none;
}

.aqdd li ul li a
{
 display: block;
 width: 140px;
 height: 20px;
 margin-top: 1px;
 border-top: 1px solid white;
}

.aqdd li ul li a:hover
{
 backround-color:#B30000; 
}

.aqdd li ul
{
 position: absolute;
 margin-top: -130px;
}

ul.aqdd li a
{
 display: block;
[b] width: 140px; height: 140px;[/b]
 background-color: #990000;
 color: white;
}

In firefox doet hij het vrijwel perfect (op één of andere manier onstaat er een margin tussen mijn 'grote' knoppen) maar in IE springen de twee sub-items helemaal naar links. Ook onstaat er dan een nóg grotere ruimte tussen de grote knoppen.

Een live-voorbeeld bevind zich op http://www.hoteloverbosch.nl/dev/.
Waar kijk ik overheen?

edit: om de knoppen te laten zien of niet gebruik ik "aqdd" (zie deaqdd site).

[ Voor 3% gewijzigd door Technicality op 16-09-2006 14:28 ]

[Rowanov]

Dat verspringen naar links in IE komt doordat je je ul niet relatief hebt gepositioneerd.

Misschien een gek idee en semantisch ook niet zo geweldig; maar wat nu als je eerst je nested ul zet, met daaronder de link? Dan hoef je alleen maar display te wissellen om de ul zichtbaar te krijgen.

[Technicality]

Rowanov schreef op zaterdag 16 september 2006 @ 14:46:
Dat verspringen naar links in IE komt doordat je je ul niet relatief hebt gepositioneerd.

Misschien een gek idee en semantisch ook niet zo geweldig; maar wat nu als je eerst je nested ul zet, met daaronder de link? Dan hoef je alleen maar display te wissellen om de ul zichtbaar te krijgen.

Ik heb het even getest: In FF komt de hoofdlink onder de 2 sublinks te staan (wat op zich logisch is) en in IE ontstaat er een grote whitespace boven de knop. De whitespace tussen de 2 grote buttons ben ik nu wel kwijt, maar ik weet niet waar deze vandaan komt...

Edit: even wat gespeeld met de margins/float/paddings van verschillend elementen, nu heb ik alleen nog last van 1 regel whitespace als ik een knop uitklap (in IE) en de regel whitespace die er altijd zit... Waar komt deze whitespace vandaan?

[ Voor 14% gewijzigd door Technicality op 16-09-2006 20:18 ]

[Technicality]

*schop*

Laat ik mijn probleem maar anders verwoorden:
Ik heb de volgende code:

HTML:

<ul id="menu">
    <li><a class="mainbutton" href="./info.php5">Informatie</a><br/>
        <ul>

          <li><a class="subbutton" href="./info.php5?page=contact">Contactinformatie</a></li>
          <li><a class="subbutton" href="./info.php5?page=route">Routeinformatie</a></li>
        </ul>
    </li>
    <li><a class="mainbutton" href="./prijzen.php5">Wij verzorgen:</a><br/>
        <ul>
          <li><a class="subbutton" href="./prijzen.php5?page=feestelijkheden">Feesten</a></li>

          <li><a class="subbutton" href="./prijzen.php5?page=vergaderingen">Vergaderingen</a></li>
        </ul>
    </li>
</ul>

en daar hoort de volgende css bij:

Cascading Stylesheet:

ul#menu, #menu ul
{
list-style-type: none;
margin: 0px;
}

a.mainbutton
{
display: block;
background-color: red;
color: white;
height: 140px;
}

Mijn doel is: de geneste li's/a's (.subbutton) moeten letterlijk óp de hoofd-li's/a's liggen (.mainbutton). Hoe doe ik dit? Want nu krijg ik een margin probleempje (als in: ik kan de .subbutton wel op de .mainbutton krijgen (dmv margin-bottom: -110px), maar dan houd ik vervelende margins over.

Live voorbeeld op http://www.hoteloverbosch.nl/dev/info.php5

[moozzuzz]

Het email adres staat er niet helemaal

In IE6+ on XP worden de subitems nu gewoon getoond onderaan (zonder te klikken). Heb je een css van de subbuttons? Ik zou alvast de <ul> die de subs heeft ook layouten... (bv een neg margin op de <ul class="sublist">)