CSS Menu (fliegendes Menü) Problem

Hallo, habe folgendes Problem:

ich bin gerade dabei eine neue Webseite zu erstellen, soweit funktioniert alles bis auf die Menüleiste.
Die DropDown Menü welches automatisch aufklappt, wenn ich per Mouseover in einem Bereich bin. Ist also ein reines CSS Menü.
In diesem aufklappt Menü befinden sich unter Punkte.

Bin ich nun mit der Maus über dem Link "Hauptpunkt", so klappt die UL darunter auf und ich kann innerhalb der UL navigieren. Verlasse ich den Bereich, so klappt das Menü wieder ein. Soweit passt auch alles.

ABER, wenn ich per Mouseover über die Hauptpunkt und dann über die UL gehe und den Mausrad bewege(Scroll up/Down) so habe ich ein fliegendes UL Menü s. Bild.

Weisst jemand vielleicht woran das liegen könnte?

Danke

HZ-Pro

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 189898

Url: https://administrator.de/forum/css-menu-fliegendes-menue-problem-189898.html

Ausgedruckt am: 10.04.2025 um 21:04 Uhr

6 Kommentare

Neuester Kommentar

... gibts es da evtl mal ein Code Schnipsel ?
Welchen Browser (-Version) benutzt Du ? - hast Du andere versucht ?

Ja, vielleicht ein Tippfehler?

Mehr kann man Dir vielleicht sagen, wenn wir mal Einblick in den Code bekommen und Du uns auch noch verrätst, mit welchen Browsern Du das Ganze getestet hast und bei welchem (oder allen) der Fehler auftritt.

vg
Bytecounter

gleicher Verhalten mit allen Browsern

Code:

#dmenu { margin: 0px;
padding: 0px;
list-style-type: none;
position: static;
background-color: rgb(245, 215, 245);
color: rgb(46, 46, 144);
z-index: 20;
cursor: pointer;
overflow: hidden;
background-image: url(./bild/r.png);
}

#dmenu li.menu { border-left: 1px solid rgb(255, 133, 244);
padding: 8px 0px 0px ! important;
list-style-type: none;
float: left;
position: relative;
display: block;
background-image: url(./bild/x.png);
text-align: center;
}

#dmenu li.menu:hover { background-image: url(./bild/y.png);
}

#dmenu .menu a.menu { padding-bottom: 5px ! important;
text-decoration: none;
width: 144px;
color: rgb(244, 5, 98);
font-size: 14px;
font-weight: bold;
}

#dmenu .menu a.menu:hover { color: rgb(255, 255, 255);
}

#dmenu ul { margin: 0pt;
position: absolute;
list-style-type: none;
display: none;
background-color: rgb(211, 211, 211);
color: rgb(215, 215, 215);
z-index: 99;
width: 144px ! important;
}

#dmenu ul li { border-top: 1px solid white;
border-bottom: 1px solid rgb(217, 218, 218);
margin: 0pt;
padding: 1px 1px 1px 20px;
color: rgb(215, 215, 215);
position: relative;
display: block;
}

#dmenu li a { display: block;
color: rgb(0, 0, 0);
font-weight: inherit;
width: auto;
}

#dmenu ul a { padding: 4px;
display: block;
text-decoration: none;
text-align: left;
text-transform: none;
font-weight: normal;
width: 122px;
color: rgb(81, 81, 81);
}

#dmenu a:hover, #dmenu li:hover { color: rgb(0, 0, 0);
position: relative;
display: block;
}

#dmenu ul li a:hover { opacity: 1;
background-color: rgb(182, 182, 182);
color: rgb(61, 61, 61);
}

#dmenu ul li:hover { border: 1px solid rgb(182, 182, 182);
margin: 0pt;
padding: 1px 0pt 1px 19px;
position: relative;
display: block;
opacity: 1;
background-color: rgb(182, 182, 182);
}

#dmenu li:hover ul ul, #dmenu li:hover ul ul ul, #dmenu li:hover ul ul ul ul, #dmenu li:hover ul ul ul ul ul { display: none;
position: relative;
}

#dmenu li:hover ul, #dmenu ul li:hover ul, #dmenu ul ul li:hover ul, #dmenu ul ul ul li:hover ul, #dmenu ul ul ul ul li:hover ul { display: block;
position: fixed;
}

li > ul { top: auto;
left: auto;
}

.content { clear: left;
}

... gibts es da evtl mal ein Code Schnipsel ?

darf es etwas mehr sein ? - bitte verstehe mich nicht falsch, aber wenn Du doch wenigstens mal nur das Menü selbst in einer einzelnen Datei packen und den Code posten könntest, wäre das toll und man müsste es nicht selbst erfinden.
btw. meistens erkennt man dann auch schon selbst den Fehler.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div>
        <ul id="dmenu" class="menu">  
            <li class="menu">  
                <a class="menu">1</a>  
                <ul>
                    <li>
                        <a>1-1</a>
                        <ul>
                            <li><a>1-1-1</a></li>
                            <li><a>1-1-2</a></li>
                        </ul>
                    </li>
                    <li><a>1-2</a></li>
                    <li><a>1-3</a></li>
                </ul>
            </li>
        </ul>
    </div>

... das funktioniert - und ich kann den von Dir beschriebenen Effekt nicht nachvollziehen ... allerdings habe ich auch nirgends dieses .content drin.

das hier klärt was ich meine:
http://de.selfhtml.org/css/eigenschaften/anzeige/position.htm

mein Menu

#dmenu li:hover ul, #dmenu ul li:hover ul, #dmenu ul ul li:hover ul, #dmenu ul ul ul li:hover ul, #dmenu ul ul ul ul li:hover ul { display: block;
position: fixed; >>(geändert in static)<<
}
ich habe die Position in static geändert an Stelle von fixed und so blieb das
dmenu li fest beim Scrollen, aber dafür verschiebt sich nun der Text unter dem Menü

ich muss weiter nach einer Lösung suchen...

Danke
HZpro

Hallo,

poste doch bitte mal den Link zu deiner Seite. Gerne auch nur einen Extralink für deine Navigation.

So lassen sich Fehler etc. viel schneller finden.

Gruß

Frage CSS Entwicklung

Mehr von HZ-pro

Exchange Server 2003 OWA Zugriff Intern geht aber extern nichtHZ-pro - 7 Kommentare

Heiß diskutiert