ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
552
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. 17.04.12 19:08 #1
    tobm_knows_best
    tobm_knows_best ist offline Mitglied Gold
    Registriert seit
    Dec 2011
    Beiträge
    108
    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-Code:
    <!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>
     
    Zitieren Zitieren
  2. 17.04.12 19:15 #2
    Avatar von spicelab
    spicelab
    spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.595
    Hierzu wird das Markup des Listenelements wie folgt erweitert:
    Code xhtml:
    1
2
3
4
5
6
7
8
9

    <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:
    Code css:
    1
2

    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!
    Geändert von spicelab (17.04.12 um 19:29 Uhr)
     
    Zitieren Zitieren
Thema nicht erledigt
« Subnavi soll stehen bleiben | Korrekter Aufbau der Linkdefinition... (weitere Linkstyles) »

Ähnliche Themen

  1. Hover miteinander Verbinden (Link Text & Link Bild)
    Von vodka im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 17.05.10, 13:20
  2. Kein Link Möglich
    Von Nabi im Forum CSS
    Antworten: 4
    Letzter Beitrag: 09.01.09, 20:38
  3. Werteübergabe mit einem Link möglich?
    Von key cee im Forum Enterprise Java (JEE, J2EE, Spring & Co.)
    Antworten: 2
    Letzter Beitrag: 06.12.07, 15:10
  4. Link mit zwei Zielen möglich?
    Von akbal12 im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 10.06.06, 17:14