✔ Subnavi soll stehen bleiben

T

tobm_knows_best

Erfahrenes Mitglied
Hallo zusammen,

ich habe hier folgenden Code, in dem ich gerne ein Art "Subnavi" mit einbauen möchte... (Links - Anstatt dem Blindtext...)

Jedoch fehlt es mir an der Kenntnis ein solches Vorhaben umzusetzen.
Kann mir vielleicht jemand den angegebenen Code ergänzen, so dass ich auch *Zeit* habe mit der Maus über die Naiv zu fahren und entsprechenden Link auszuwählen****?

Wäre wirklich super :/

VlG

Hier einmal der Code zur Veranschaulichung was ich meine ;)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
	<title>Simple Blue Rollover</title>
</head>
<body>

	<ul id="blue">
		<li class="current"><a href="#" title="">Home<span>This takes you to the welcome page of the website - the starting point for everything.</span></a></li>
		<li><a href="#" title="">About Us<span>We are a great team of people, with lots of fantastic things to offer.</span></a></li>
		<li><a href="#" title="">Portfolio<span>Our portfolio showcases all the work that we've done for the past few weeks.</span></a></li>
		<li><a href="#" title="">Music<span>We also love to listen to some tunes while we work. Here we're sharing them with you all!</span></a></li>
		<li><a href="#" title="">Contact Us<span>If you would like to get in touch with us, you can do so here via email or telephone.</span></a></li>
	</ul>

Und hier das zugehörige CSS:
CSS: 
ul#blue { margin:0; padding:0; list-style-type:none; }

ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}

ul#blue .current { border-top:4px solid #3d496a;}

ul#blue li:hover { border-top:4px solid #3d496a;}

ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}

ul#blue li a:hover { color:#8895b8; border:none; }

ul#blue li span{ display:none; position:absolute; top:20px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }

ul#blue li a:hover span {margin-top: 7px; display:block; color: #8895b8;}
 
Aus
CSS: 
ul#blue li a:hover span {margin-top: 7px; ...}
wird
CSS: 
ul#blue li a:hover span {padding-top: 7px; ...}
 
Zuletzt bearbeitet:
spicelab hat gesagt.:
Aus
CSS: 
ul#blue li a:hover span {margin-top: 7px; ...}
wird
CSS: 
ul#blue li a:hover span {padding-top: 7px; ...}
Zum Vergrößern anklicken....

Guten Morgen,

wow - das klappt ja wunderbar - aber was genau ändert sich jetzt hier an der Darstellungsdauer? Also padding & margin sind in meinen Augen doch nur *Abstands-halter*... ?!

Kann man mir das ein wenig genauer erklären?

VG
 
tobm_knows_best hat gesagt.:
[...] aber was genau ändert sich jetzt hier an der Darstellungsdauer? Also padding & margin sind in meinen Augen doch nur *Abstands-halter*... ?!
Zum Vergrößern anklicken....
Richtig, margin für Außenrand und Abstand, padding für Innenabstand des Elements/der "CSS-Box".

Daraus folgt, dass mit einem (oberen) Innenabstand der (obere) Boxenrand des Untermenüs bei null beginnt, was hier deiner absoluten Positionsangabe top:20px für's Untermenü (=Kindelement), ansonsten der Oberkante des Hauptmenüs (=Elternelement) entspricht, und es somit nach dem Ausklappen nicht wieder voreilig geschlossen wird, sobald der Mauszeiger den Hauptmenüpunkt Richtung Untermenü verlässt und dessen (inneren) Abstand überbrücken soll ;)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück