hz-pro
Aug 21, 2012, updated at 07:36:48 (UTC)
view4762
view6
0
Goto Top

CSS Menu (fliegendes Menü) Problem

GermanQuestionCSSDevelopment
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

7734e1b24a38d50034ebc4c9b28e71ce
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 189898

Url: https://administrator.de/contentid/189898

Printed on: April 18, 2024 at 14:04 o'clock

6 Comments
Latest comment
Goto Top
Member: nxclass
nxclass Aug 21, 2012 updated at 08:58:45 (UTC)
Goto Top
... gibts es da evtl mal ein Code Schnipsel ?
Welchen Browser (-Version) benutzt Du ? - hast Du andere versucht ?
Member: bytecounter
bytecounter Aug 21, 2012 at 09:49:13 (UTC)
Goto Top
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
Member: HZ-pro
HZ-pro Aug 21, 2012 updated at 12:22:23 (UTC)
Goto Top
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;
}
Member: nxclass
nxclass Aug 21, 2012 updated at 18:18:40 (UTC)
Goto Top
... 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.

    <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.
Member: HZ-pro
HZ-pro Aug 30, 2012 at 12:55:02 (UTC)
Goto Top
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ü face-sad
ich muss weiter nach einer Lösung suchen...

Danke
HZpro
Member: d4shoerncheN
d4shoerncheN Aug 30, 2012 at 12:59:19 (UTC)
Goto Top
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ß
GermanQuestionCSSDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment