Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „dropdown css“

grv

Nicht mehr ganz neu hier

Hi,
Zuersteinmal...Ich bin absoluter Noob in Sachen CSS.
Mein Prob:
Habe "versucht" ein DD-Menue per CSS zu erstellen, und zwar vollkommen aus Grafiken, sprich kein Text. Jeder Link ist also ein Bild. (siehe image)



Jedoch wird das HOVER zum Katz und Maus Spiel. Beim Hovern ueber "Einleitung" klappt mir das Dropdown aus, soweit so gut. Wenn man jedoch nun versucht von "Einleitung" z.B. auf den ersten a:hover (untermenue) zu switchen, dann verschwindet das gesamte untermenue...nur manchmal erwischt man ein untermenue, wenn man schnell die maus bewegt...verrueckt...
hier die css:

<style type="text/css">
<!--
body{
position:absolute;
}

#Einleitung{
position:absolute;
top: 21px;
left: 64px;
height:50px;
width: 142px;
margin: 10px;
padding: 0px;
list-style:none;
background-image: url(einleitung.png);
background-repeat: no-repeat;
text-indent: -999999px;
}

#Einleitung a{
display: none;
height: 54px;
border: 0px;
text-decoration: none;
}

#Einleitung span{
height: 54px;
width: 150px;
margin: 2px 0px;
padding:5px;
font-weight: 600;
border: none;
}

#Einleitung:hover{
background-position: left -57px;
}

#Einleitung:hover a {
display: block;
margin: 2px 0px;
padding: 0px 5px;
color: #000000;
}

#chaos a {
background-image:url(chaos.png);
width: 213px;
}

#entwicklung a {
background-image:url(zahlentw.png);
width: 256px;
}

#imaginaer a {
background-image:url(imagzahl.png);
width: 256px;
}

#komplex a {
background-image:url(komplzahl.png);
width: 256px;
}

#darstellung a {
background-image:url(darkomplz.png);
width: 259px;
}

#chaos a:hover {
background-position: left -50px;
}

#entwicklung a:hover {
background-position: left -50px;
}

#imaginaer a:hover {
background-position: left -50px;
}

#komplex a:hover {
background-position: left -50px;
}

#darstellung a:hover {
background-position: left -50px;
}


#Einleitung:hover span{
display:block;
background-position: left -54px;
margin: 0;
padding: 0;

}
</style>



Und der Body:

<body>
<div id="Einleitung">
<span>Einleitung</span>

<div id="chaos"><a href="chaos.htm">Chaosforschung</a></div>
<div id="entwicklung"><a href="entwicklung.htm">Entwicklung der Zahlen</a></div>
<div id="imaginaer"><a href="imaginaer.htm">Imaginäre Zahlen</a></div>
<div id="komplex"><a href="komplex.htm">Komplexe Zahlen</a></div>
<div id="darstellung"><a href="darstellung.htm">Darstellung komplexer Zahlen</a></div></div>

</body>


Waer nett wenn mir jemand helfen koennte. :uhm:
 

Schnoobby

Nicht mehr ganz neu hier

AW: dropdown css

versuch das ganze mal mit einer liste und respektive unterlisten und nicht mit divs, dann sollte es klappen.

<li id="Einleitung">
<ul>
<li id="Chaos">...
...
...
</ul>
</li>

problem bei den divs scheint wohl der abstand zwischen den blöcken zu sein, sodass du nicht mehr im "hover"-bereich bist. solltest auch mit einer änderung der abstände hinbekommen aber ich finde menüs sollte in listen gepackt werden ;-)
 

Pixus

Aktives Mitglied

AW: dropdown css

Hallo.
So wie Du das hier eingestellt hast, werde ich nicht ganz schlau daraus!
Dennoch glaube ich, dass der Fehler im dem CSS-Block #Einleitung im Wert margin:10px liegt.
Mit diesem Wert definierst Du einen Außenabstand zu den umliegenden Elementen. In diesem Bereich ist dann der Hover-Event nicht mehr wirksam.
Setze doch mal der Reihe nach alle margin-Einträge auf 0px und prüfe, ob der Fehler verschwindet.
 

grv

Nicht mehr ganz neu hier

AW: dropdown css

perfekt, danke! lag an den margins japp

genauergesagt an diesem:

#Einleitung:hover a {
display: block;
margin: 2px 0px;
padding: 0px 5px;
color: #000000;
}

danke vielmals :)
 
AW: dropdown css

In diesem Zusammenhang möchte ich mal noch folgendes CSS-Dropdown Menü von Stu Nicholls anmerken:

In meinen Augen das ultimative Dropdown-Menü, da ohne Javascript und mit nahezu allen Browsern kompatibel!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.875
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben