[css]probleem met menu

[Dr_Frickin_Evil]

Heb een menuutje gemaakt op mn site. Werkt goed in mozilla, IE geeft (weer) wat problemen. De popupmenuutjes komen achter het hoofdmenu tevoorschijn, dit lijkt dus deels aan de z-index te liggen, maar ik krijg het niet gefixt. Ik zal beginnen met een voorbeeld waar het probleem zich voordoet:
http://131.155.241.57/test/test.html

Hou je je muis boven de kopjes 'products' en 'applications', dan springt dat submenuutje te voorschijn. In IE valt dit dus deels onder het hoofdmenu. In de source staat alle benodigde code. Heeft iemand een idee hoe ik dit kan fixen?

[nero355]

In Firefox 0.9.2 @ 1152x864 ziet het er ook niet echt perfect uit

[Dr_Frickin_Evil]

Het gaat me in dit voorbeeld alleen om de plaats van de popup menuutjes.

[bRight]

Het ligt inderdaad aan de z-index. Die is voor alle ul's gelijk, en de layering wordt nu dus bepaald door de volgorde in je html.
Je kan dit simpel oplossen door de ul's een verschillende class met z-index te geven per hierarchisch 'niveau' in je menu.

[Dr_Frickin_Evil]

Ja heb ik geprobeerd, maar dat werkt ook niet, heb het even in de code aangepast.

[zubauza]

http://www.alistapart.com/articles/horizdropdowns/

voorbeeld:

http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

[Dr_Frickin_Evil]

Dat menuutje werkt ook niet fatsoenlijk, heeft hetzelfde probleem, kijk maar:
http://131.155.241.57/test/test.html

Toch vreemd, ik geef het toch gewoon goed en duidelijk aan met die z-index?

[ Voor 26% gewijzigd door Dr_Frickin_Evil op 02-08-2004 19:37 ]

[bRight]

Volgens mij is het een inheritance probleem.. maar waar het aan ligt weet ik ook niet.

Ik heb nog een voorbeeld dat wel goed werkt:
http://www.codeproject.co...13275&exp=0&select=489799

Met dezelfde methodiek als jij toepast.
Je nesting is trouwens ook gewoon netjes volgens W3C normen.. toch vreemd..

[ Voor 3% gewijzigd door bRight op 02-08-2004 20:43 ]

[zubauza]

Dr_Frickin_Evil schreef op 02 augustus 2004 @ 19:36:
Dat menuutje werkt ook niet fatsoenlijk, heeft hetzelfde probleem, kijk maar:
http://131.155.241.57/test/test.html

wat wil je nou precies?
dat voorbeeld van alistapart werkt toch gewoon perfect

[Switch]

Dr_Frickin_Evil schreef op 02 augustus 2004 @ 19:36:

Toch vreemd, ik geef het toch gewoon goed en duidelijk aan met die z-index?

Niks vreemd aan, want je doet 't verkeerd Z-index doet 't alleen als het betreffende element is gepositioneerd (position:relative etc), en jouw ul('s) is(/zijn) dat niet

Voor meer info over z-index even w3schools raadplegen

[ Voor 13% gewijzigd door Switch op 03-08-2004 11:22 ]

[Dr_Frickin_Evil]

zubauza schreef op 03 augustus 2004 @ 09:22:
[...]

wat wil je nou precies?
dat voorbeeld van alistapart werkt toch gewoon perfect

Ja, dat werkt perfect, zolang je de submenu's het hoofdmenu niet laat overlappen. Als je mijn link even had bekeken dan had je het probleem gezien.

Switch schreef op 03 augustus 2004 @ 11:21:
[...]


Niks vreemd aan, want je doet 't verkeerd Z-index doet 't alleen als het betreffende element is gepositioneerd (position:relative etc), en jouw ul('s) is(/zijn) dat niet

Voor meer info over z-index even w3schools raadplegen

Heb ff een testje gemaakt. Het gaat nu ook in firefox fout, dus dan zal het nu wel iig aan mijn code liggen.
http://131.155.241.57/test/test.html
Het hoofdmenu is relatief gepositioneerd, z-index 1, de submenu's zijn absoluut gepositioneerd, z-index 10, en ik heb als test het rode vlak toegevoegd, absoluut gepositioneerd, z-index 5. Nu valt dat vlak dus (zowel in mozilla als in IE) over het menu (das niet zo raar), en over het submenu heen (en dat vind ik wel raar). Wat doe ik dan fout?

[ Voor 58% gewijzigd door Dr_Frickin_Evil op 03-08-2004 16:21 ]

[zubauza]

Dr_Frickin_Evil schreef op 03 augustus 2004 @ 15:49:
[...]

Ja, dat werkt perfect, zolang je de submenu's het hoofdmenu niet laat overlappen. Als je mijn link even had bekeken dan had je het probleem gezien.

het probleem was duidelijk idd maar niet je bedoeling

[Dr_Frickin_Evil]

Ik heb er ondertussen al een tijdje niet meer naar gekeken wegens tijdgebrek, maar ik wilde het nu toch erg graag afmaken, maar ik loop nog steeds tegen hetzelfde probleem aan. Ik snap er geen zak van, heb nog nergens een evt antwoord kunnen vinden. Het probleem doet zich nog steeds alleen onder IE voor, in mozilla werkt het prima, je kunt het hier bekijken: http://131.155.241.57/bersonnew/index.php

css:

code:

#menu { border-style: solid solid solid none; display: block; left: 0; position: relative; top: 80px; width: 110px; z-index: 1; }
#menu li ul { border-style: solid; display: none; left: 70px; position: absolute; top: 5px; width: 150px; z-index: 2; }
#menu, #menu li ul {
    background-color: white;
    border-width: 1px;
    border-color: #B2B2B2;
    color: #5A5A5A;
    list-style: none;
    margin: 0;
    padding: 0;
    }
#menu li { padding: 0 0 1px 0; position: relative; list-style-type: none; }
#menu li a {
    background-color: #EAF5F3;
    text-decoration: none;
    color: #5A5A5A;
    height: 14px;
    padding: 0 0 0 25px;
    }
#menu li>a { width: auto; }
#menu li a:hover { background-color: #269581; color: white; }
#menu li, #menu a { border: 0; display: block; margin: 0; }
#menu li.submenu { border-bottom: 1px solid #B2B2B2; border-top: 1px solid #B2B2B2 }
#menu img { border-style: solid solid solid none; border-width: 1px; border-color: #B2B2B2; margin: 0; padding: 0; }

Het menu wordt opgemaakt op een volgende manier:

code:

<ul id="menu">
    <li><a href="index.php?section=home">Home</a></li>
    <li><a href="index.php?section=company">Company</a></li>
    <li> 
      <a href="index.php?section=products">Products</a> 
      <ul>
        <li><a href="index.php?section=products&amp;specify=inline">bersonInLine</a></li>

enz...

Ik denk dat in dit laatste de fout niet zit. Ergens in de css moet de fout zitten. Maar waar?!?!

[ Voor 8% gewijzigd door Dr_Frickin_Evil op 09-08-2004 17:17 ]

[Dr_Frickin_Evil]

Niemand die een idee heeft? Ik begin er stilaan moedeloos van te worden...

[NH298]

Op http://www.naarvoren.nl/artikel/hover_cssmenu.html overlappen de menu's elkaar ook en dat voorbeeld werkt wel goed.

[Dr_Frickin_Evil]

Heb dat inderdaad maar gebruikt, nu werkt het, maar wat er mis was is me nog niet helemaal duidelijk