DropDown Menü dauerhaft offen, wo liegt das Problem ?!
bearbeitet von Rolf bSo, ich habe die Codewurst mal viviseziert und auf das Wesentliche REDUZIERT. Folgende Fehler stelle ich fest:
- es fehlt ein Style, der den Normalzustand des Popup auf `display:none` festlegt
- IDs müssen eindeutig sein, mehrfache Verwendung von `id="submenu"` ist nicht zulässig. Du kannst statt dessen `class="submenu"` zuordnen und im CSS mit `ul.submenu` ansprechen
- Du gibst dem `ul#submenu` ein `position:absolute`. Das ist ok, aber benötigt eigentlich ein Elternelement mit `position:relative`, das den Bezugspunkt für das absolut positionierte Element liefert. Entweder hast Du den entsprechenden Style nicht mitgeliefert, oder es funktioniert bei Dir nur deshalb, weil Du für das Menü keine top/left Angaben machst. Sobald Du es nur um ein Pixel anderswo haben willst, wird der Browser es relativ zum einzigen vorhandenen `position:relative` Element platzieren, und das ist der body.
- In meiner Ansicht erscheint das Menü als [Lord Vetinari Wappen](http://wiki.lspace.org/mediawiki/Havelock_Vetinari), ich habe die Hintergrundfarben etwas angepasst um den Text lesen zu können. Deine Komplettseite hat vermutlich weitere styles, die die Textfarbe ändern.
- Ich bezweifle, dass das nav Element für handgestyle Popup-Menüs sinnvoll ist. Es bezeichnet eigentlich den Navigationsbereich der ganzen Seite und bringt über `role='navigation'` entsprechende Aria-Informationen mit. Das wäre aber schon falsch, für Popups ist eigentlich `role='menu'` richtig. Ich würde es an deiner Stelle weglassen, dem ul.submenu die menu-Rolle geben und die Popup-Steuerung komplett daran festmachen.
Der größte Honk ist dieser:
- `nav li:hover #submenu { display: block;}` sieht aus wie der Versuch, das Submenü auf `display:block` zu schalten, wenn man über einem List-Item hovert. Das kann aber so nicht funktionieren, weil der Selektor "nav li:hover #submenu" ein Element mit id="submenu" trifft, das sich innerhalb eines li:hover befindet, das sich innerhalb eines nav befindet. Das HTML hat aber eine andere Hierarchie. Eine Alternative könnte `td:hover ul.submenu` sein. Ich würde den Default-Stil `display:none` und das `position:absolute` ebenfalls auf das nav
So. Damit hast Du erstmal ein paar Hausaufgaben ;-)
Rolf
DropDown Menü dauerhaft offen, wo liegt das Problem ?!
bearbeitet von Rolf bSo, ich habe die Codewurst mal viviseziert und auf der Wesentliche REDUZIERT. Folgende Fehler stelle ich fest:
- es fehlt ein Style, der den Normalzustand des Popup auf `display:none` festlegt
- IDs müssen eindeutig sein, mehrfache Verwendung von `id="submenu"` ist nicht zulässig. Du kannst statt dessen `class="submenu"` zuordnen.
- Du gibst dem `ul#submenu` ein `position:absolute`. Das ist ok, aber benötigt eigentlich ein Elternelement mit `position:relative`, das den Bezugspunkt für das absolut positionierte Element liefert. Entweder hast Du den entsprechenden Style nicht mitgeliefert, oder es funktioniert bei Dir nur deshalb, weil Du für das Menü keine top/left Angaben machst. Sobald Du es nur um ein Pixel anderswo haben willst, wird der Browser es relativ zum einzigen vorhandenen `position:relative` Element platzieren, und das ist der body.
- In meiner Ansicht erscheint das Menü als [Lord Vetinari Wappen](http://wiki.lspace.org/mediawiki/Havelock_Vetinari), ich habe die Hintergrundfarben etwas angepasst um den Text lesen zu können. Deine Komplettseite hat vermutlich weitere styles, die die Textfarbe ändern.
- Ich bezweifle, dass das nav Element für handgestyle Popup-Menüs sinnvoll ist. Es bezeichnet eigentlich den Navigationsbereich der ganzen Seite und bringt über `role='navigation'` entsprechende Aria-Informationen mit. Das wäre aber schon falsch, für Popups ist eigentlich `role='menu'` richtig. Ich würde es an deiner Stelle weglassen, dem ul.submenu die menu-Rolle geben und die Popup-Steuerung komplett daran festmachen.
Der größte Honk ist dieser:
- `nav li:hover #submenu { display: block;}` sieht aus wie der Versuch, das Submenü auf `display:block` zu schalten, wenn man über einem List-Item hovert. Das kann aber so nicht funktionieren, weil der Selektor "nav li:hover #submenu" ein Element mit id="submenu" trifft, das sich innerhalb eines li:hover befindet, das sich innerhalb eines nav befindet. Das HTML hat aber eine andere Hierarchie. Eine Alternative könnte `td:hover ul.submenu` sein. Ich würde den Default-Stil `display:none` und das `position:absolute` ebenfalls auf das nav
So. Damit hast Du erstmal ein paar Hausaufgaben ;-)
Rolf