[css] menu probleem met :hover

[Plux]

Hallo,
Ik heb adhv het suckerfish-concept een css-menu in elkaar gedraaid. CSS is nog vrij nieuw voor mij, ik ken niet alle ins en outs, en ik loop nu tegen een probleem aan waarvan ik waarschijnlijk wel weet hoe het komt, maar niet hoe ik het op kan lossen. Plaatje:

Naast het feit dat de dubbele regels nog niet mooi uitvallen, is vooral het probleem dat de :hover op de li-elementen slechts werkt aan de linkerkant van de verticale streep. Die streep is namelijk de linker-border van een div, waarvan volgens mij de :hover de hover van het menu overruled. Zodra ik dus over de streep ga met de cursor valt het hele menu weer weg.

In dit topic wordt al aangegeven dat het probleem waarschijnlijk wordt opgelost door altijd een background aan de li toe te kennen. Ook hier wordt gezegd dat de background nooit moet worden vergeten

code:

 ul.makeMenu, ul.makeMenu ul {
background-color: #8aa;      /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */' }

hoewel hij hem daar aan ul ul toekent. Beide oplossingen werken echter niet bij mij.

Mijn css:

code:

/* Start layout for dynamic menu */
ul.menu {
  list-style: none;            /* removes the bullet points */
  margin: 0px;                 /* Opera 7 final's margin and margin-box model cause problems */
  padding: 0px;
  width: 110px;                       
}

li.menu {
  width: 105px;
  margin: 5px 2px 0;
  height: 20px;
  cursor: pointer;              /* gives a hand cursor */
}

ul.menu ul.menu {               /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */
  position: relative;          /* make child blocks hover without leaving space for them */
  top: 0px;                    /* position slightly lower than the parent menu item */
  left: 50px;                  /* this must not be more than the width of the parent block, or the mouse will
                                  have to move off the element to move between blocks, and the menu will close */

}

li.menu:hover {
  background-color: #903;
  color: #fff;
}

li.menu ul.menu {
  display: none;
  background: ;        
}

li.menu:hover > ul.menu {
  display: block;              /* makes the child block visible - one of the most important declarations */
}

/* and some link styles */
ul.menu {
  background-color: #aaa;
  border: 1px solid #000;
  font-size: 12px;
}

li.menu a {
  color: #fff; display: block; text-decoration: none;
}

li.menu:hover > a {
 color: #fff;
}

Iemand een idee of tips/suggesties?

[Sappie]

Zou je misschien ook even de relevante HTML kunnen posten?

edit: lijkt me zo dat het hele menu uberhaupt niet werkt onder IE, aangezien je gebruik maakt van de child selector die IE niet ondersteunt. Ook begrijp ik niet dat je je "second level" ul's een position: relative ipv absolute meegeeft. Dit kan volgens mij de layout alleen maar verkloten.

[ Voor 76% gewijzigd door Sappie op 23-06-2005 12:50 ]

[André]

Probeer de z-index van de menuitems eens hoger te zetten

[Plux]

Shit, ik wist dat ik iets vergeten was De door ColdFusion gegenereerde HTML:

code:

<ul class="menu">

    <li class="menu menuoff" style="z-index: 1;">
    <a href="...">Account</a>
    </li>

    <li class="menu menuoff" style="z-index: 1;">
    <a href="...">Agent</a>
    </li>
        
    <li class="menu menuoff" style="z-index: 1;">
    <a href="Beheer.cfm">Beheer</a>

        <ul class="menu">
            <li class="menu menuoff" style="z-index: 2;">
            <a href="...">Lexicon</a>
            </li>
 
            <li class="menu menuoff" style="z-index: 2;">
            <a href="...">Rollen</a>
            </li>

            <li class="menu menuoff" style="z-index: 2;">
            <a href="...">Vragenoverzicht</a>

                <ul class="menu">
                <li class="menu menuoff" style="z-index: 3;">
                <a href="...">Meest jofele vragen</a>
                </li>
                </ul>   
            </li>
        
</ul>   

Enzoverder....

@André: Je ziet ik maak al gebruik van z-index, die van de div staat op 0.

@ Sappie: In IE zal dit idd nog niet werken, maar daarvoor zijn workarounds, die ik nog moet uitwerken. Het gebruik van relative zorgt er juiste voor dat de submenu's worden uitgeklapt naast hun parent, in plaats van allemaal op dezelfde absolute plek.

Dank voor de reacties tot nu toe..

[Sappie]

absoluut positioneren gebeurt ten opzichte van de parent die ook gepositioneerd is.. dat hoeft dus uiteraard niet op dezelfde plek te zijn.

verder staat hier een voorbeeld uitgewerkt waar je dr wel mee uit moet komen: http://www.naarvoren.nl/artikel/hover.html

[JoeKurr]

Ik heb net ook even snel een dergelijk menu'tje in elkaar gefietst, en liep tegen hetzelfde probleem aan.
Na wat proberen ontdekte ik dat het probleem zich voordoet als je voor de content div de overflow op auto of scroll hebt staan.
Zet je deze op visible of hidden, dan werkt het wel.

[Plux]

Dat is idd het probleem en een oplossing. Dank je wel JK!

Echter, ik heb even verder getest, en het lijkt erop dat het menu over zijn nek gaat van iedere div of iframe in de content die scrollable is. Het effect is een rare flikkering waarbij die scrollable divs verplaatsen ongeveer 500 pixels van links en zo'n 40 pixels naar boven. Erg lelijk.

Ik wil echter niet al die scrollability uit moeten schakelen, ik heb een aantal divs met gefixeerde afmetingen waarin een hoop data moet worden getoond. Die kunnen niet zomaar weg.

Het zou mooi zijn als er meerdere mogelijkheden zouden zijn. Iemand nog een idee voor een andere oplossing?.

[ Voor 18% gewijzigd door Plux op 23-06-2005 15:40 ]

[JoeKurr]

Na nog wat verder klooien heb ik ontdekt dat het menu wel werkt als het hoofdmenu de content-div overlapt.
Dit hoeft maar één pixel te zijn.



De menu-items in deze afbeelding lopen tot de blauwe lijn.
Ik heb hier expres een overlap van 5 pixels gekozen, zodat het wat beter zichtbaar is.

[Plux]

Geweldig, die oplossing kan ik wel wat mee! Idd ul extreem breed maken en dan menu weergeven alleen op basis van de li's.


Hmm, te vroeg gejuicht. Hier werkt het nog niet met scrollable divs. Wat is nu bij jouw die de overflow van content div?

Verder geldt ook dat ik nu nog een pagina heb waar het menu over een iFrame heen gaat. Daar valt het menu ook weg als de cursor het iFrame bereikt, en scrolling op 'no' zetten helpt niet . iFrame-props zijn width="99%" height="600px" style="z-index:1;" scrolling="no".

[ Voor 77% gewijzigd door Plux op 23-06-2005 16:31 . Reden: te vroeg gejuicht ]

[Plux]

Altijd wel prettig om nog even mede te delen dat de oplossing gevonden is. Op deze pagina staat een simpele hack om CSS menu's over divs met overflow:auto of overflow:scrollable te laten glijden.

http://www.acc.umu.se/~caran/barebone.html