1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Link im Link möglich?

Dieses Thema im Forum "CSS" wurde erstellt von tobm_knows_best, 17. April 2012.

  1. tobm_knows_best

    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:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4.     <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
    5.     <title>Simple Blue Rollover</title>
    6. </head>
    7. <style type="text/css" media="screen">
    8.  
    9. ul#blue { margin:0; padding:0; list-style-type:none; }
    10.  
    11. ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}
    12.  
    13. ul#blue .current { border-top:4px solid #3d496a;}
    14.  
    15. ul#blue li:hover { border-top:4px solid #3d496a;}
    16.  
    17. ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}
    18.  
    19. ul#blue li a:hover { color:#8895b8; border:none; }
    20.  
    21. 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; }
    22.  
    23. ul#blue li a:hover span {padding-top: 7px; display:block; color: #8895b8;}
    24.  
    25.  
    26.     <ul id="blue">
    27.         <li class="current"><a href="#" title="">Start<span>» Blindtext</span></a></li>
    28.         <li><a href="#" title="">Über<span>» Blindtext</span></a></li>
    29.         <li><a href="#" title="">Leistungen<span>»Menü 1<br/>»Menü 2<br/>»Menü 3</span></a></li>
    30.         <li><a href="#" title="">Kontakt<span>» Blindtext</span></a></li>
    31.         <li><a href="#" title="">Impressum<span>» Blindtext</span></a></li>
    32.     </ul>
    33.  
  2. spicelab

    spicelab ZENmechanic

    Hierzu wird das Markup des Listenelements wie folgt erweitert:
    Code (HTML5):
    1.  
    2. <ul>
    3.   <li><a href="#">item 1</a></li>
    4.   <li><a href="#">item 2</a>
    5.     <ul>
    6.       <li><a href="#">subitem 2.1</a></li>
    7.       <li><a href="#">subitem 2.2</a></li>
    8.     </ul>
    9.   </li>
    10. </ul>
    11.  
    und das zugehörige CSS zum Verstecken und Anzeigen des Submenüs:
    Code (CSS):
    1.  
    2. ul li ul {display:none}
    3. ul li:hover ul {display:block}
    P.S. Wähle zukünftig bitte das passende Forum für deine (CSS-)Fragen!
    Zuletzt bearbeitet: 17. April 2012

Diese Seite empfehlen