Link im Link möglich?

T

tobm_knows_best

Erfahrenes Mitglied
Hallo zusammen - lustigerweise wurde mir bereits bei der Erstellung der hier gezeigten Naiv geholfen - aber besteht die Möglichkeit einen weiteren Link (bspw. in den Text unter den Menüpunkten) zu erstellen?

Ich würde gerne 3 Submenüpunkte erstellen... :/
Ich denke im Menüpunkt Leistungen ist das ganz gut zu erkennen - bis jetzt verweist der Link ja komplett (incl. dem sich einblendenden Submenü) auf eine entsprechende Seite :( Was er aber nicht tun soll...

VG

Hier mal der Code...

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>
<style type="text/css" media="screen">

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 {padding-top: 7px; display:block; color: #8895b8;}

</style>
<body>

	<ul id="blue">
		<li class="current"><a href="#" title="">Start<span>» Blindtext</span></a></li>
		<li><a href="#" title="">Über<span>» Blindtext</span></a></li>
		<li><a href="#" title="">Leistungen<span>»Menü 1<br/>»Menü 2<br/>»Menü 3</span></a></li>
		<li><a href="#" title="">Kontakt<span>» Blindtext</span></a></li>
		<li><a href="#" title="">Impressum<span>» Blindtext</span></a></li>
	</ul>
 
Hierzu wird das Markup des Listenelements wie folgt erweitert:
HTML: 
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a>
    <ul>
      <li><a href="#">subitem 2.1</a></li>
      <li><a href="#">subitem 2.2</a></li>
    </ul>
  </li>
</ul>

und das zugehörige CSS zum Verstecken und Anzeigen des Submenüs:
CSS: 
ul li ul {display:none}
ul li:hover ul {display:block}

P.S. Wähle zukünftig bitte das passende Forum für deine (CSS-)Fragen!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück