Menü-Aufbau

[Casablanca]

Hallo Forum,

ich versuche gerade eine Menü mit Submenü aufzubauen. Als Vorlage habe das Beispiel auf der Seite "http://code-tricks.com/simple-css-drop-down-menu/" genommen. Das Problem dabei ist, dass man bei  Menu 1 und Menu 4 nicht immer mit der Maus auf Submenus wechseln kann, weil sobald der Zeiger die Menüs verlässt, blendet sich die Submenü aus . Wie kann man diese verhindern. Es gibt einen Abstand von einem Pixel zwischen der Menü und Submenü. Wenn man diesen wegnimmt, funktioniert alles gut. Ich brauche aber diesen Abstand.

Gruß

[Steel]

Hi!

Natürlich verschwindet das Menü, wenn man es verlässt. Das tut man scheinbar bei dir, hervorgerufen durch den Abstand. Die Elemente sollten sich also am Besten überlappen. Eine geschickte Anordung kombiniert mit Transparenz sollte Dir deinen dringend benötigten Abstand bescheren.

[Matthias Apsel]

Ergänzung:

Natürlich verschwindet das Menü, wenn man es verlässt. Das tut man scheinbar bei dir, hervorgerufen durch den Abstand. Die Elemente sollten sich also am Besten überlappen. Eine geschickte Anordung kombiniert mit Transparenz sollte Dir deinen dringend benötigten Abstand bescheren.

Etwa durch die Verwendung von padding statt margin.

Matthias

[Casablanca]

Hallo Matthias,

danke. Die CSS-Datei sieht wie folgt aus:

  
    <style type="text/css">  
        ul#menu, ul#menu ul.sub-menu {  
            padding:0;  
            margin: 0;  
            font-weight:bold;  
        }  
        ul#menu li, ul#menu ul.sub-menu li {  
            list-style-type: none;  
            display: inline-block;  
        }  
  
        /*Link Appearance*/  
        ul#menu li a, ul#menu li ul.sub-menu li a {  
            text-decoration: none;  
            color: #fff;  
            background: #118401;  
            padding: 10px;  
            display:inline-block;  
        }  
  
        /*Make the parent of sub-menu relative*/  
        ul#menu li {  
            position: relative;  
        }  
  
        /*sub menu*/  
        ul#menu li ul.sub-menu {  
            display:none;  
            position: absolute;  
            top: 39px;  
            left: 0;  
            width: 150px;  
            background: #0C6101;  
        }  
        ul#menu li:hover ul.sub-menu {  
            display:block;  
        }  
    </style>  

Die top-Eigenschft in /*sub menu*/ ist für den Abstand verantwortlich. Ich habe top durch padding-top:1px ersetzt. Ich habe nun meinen Abstand. Ich kann aber jetzt nicht die Bereite des Submenus ändern. Die ist genauso bereit wie der Text, der drin steht.

Gruß

[Matthias Apsel]

Om nah hoo pez nyeetz, Casablanca!

danke. Die CSS-Datei sieht wie folgt aus:

CSS ist ohne das HTML, auf das es angewendet wird, wenig hilfreich.

Die top-Eigenschft in /*sub menu*/ ist für den Abstand verantwortlich. Ich habe top durch padding-top:1px ersetzt.

absolute Postionierung für ein Submenü ist eigentlich nicht notwendig.

Ich habe nun meinen Abstand. Ich kann aber jetzt nicht die Bereite des Submenus ändern. Die ist genauso bereit wie der Text, der drin steht.

Das sollte vorher auch schon so gewesen sein und ist eine Folge von inline-block.

Wenn man dir effizient helfen soll, müsstest du die Seite zeigen und beschreiben, was noch nicht so aussieht wie gewünscht.

Matthias

[Casablanca]

Hallo,

danke, es hat sich erledigt.

Gruß