ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
685
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. #1
    tobm_knows_best ist offline Mitglied Gold
    Registriert seit
    Dec 2011
    Beiträge
    111
    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>
     

  2. #2
    Avatar von spicelab
    spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.718
    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)
     

Thema nicht erledigt

Ä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