Deutsch
Code für Spezialeffekte für Webseiten: Dropdown-Menü für Webseiten, erstellt mit reinem CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | Tabelle)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head > <meta http- equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Pure CSS-Dropdown-Menü, kompatibel mit IE und FF</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font- size:3em; text-align: center; "times new roman", serif;} #head {height:145px; border:0;} 1px; z-index:100; } #ads {position:relative; z-index:10;} .menu {display:none;} #noniemenu ul {padding:0; :0;} #noniemenu .holder ul li {list-style-type: none;} #noniemenu .holder li {} #noniemenu .holder li ul {display: none;} #noniemenu .holder li:hover > ul#a3 {display:block; position:absolute; margin-top:-20px; border:1px solid #000;} #noniemenu .bold {font-weight:bold;} #noniemenu .holder { color:# fff; width:104px; display:block:hidden; border-right:10px; :auto; } #noniemenu a.outer:visited { color:#fff; display:block:text- Dekoration: keine; Schriftfamilie: Verdana, Arial, Sans-Serif; } #noniemenu a.outer:hover {background:#697210; inner, #noniemenu a.inner: besuchte { display:block; height:18px; border-bottom:1px; text-decoration:#000; #eee; text-align:center ; } #noniemenu a.second {font-weight:bold;} #noniemenu a.inner:hover { background:#add; } <!--[if lte IE 6 ]> <style type="text /css"> body {margin-top:-8px;} #head {height:147px;} #noniemenu {display:none;} .menu {display:block;position:absolute;} .menu a.outer, .menu a.outer:visited { color:#fff; width:104px; display:block:1px solid #000; -align:center; text-decoration:none; font-size:10px; overflow:hidden; hover {background:#697210; overflow :visible; } .menu a.outer:hover table.first { display:block; border-collapse:collapse; :visited { display:block; height:18px; solid #000; font-family: verdana, sans-serif; :10px; text-align:center ; .menu a.inner:hover {background:#add; font-weight:bold; .menu a.outer table.first a.second:hover { position:relative; :-2px; left:102px; border-collapse:collapse; border:1px solid #000; </style> <![endif]--[if lte IE 6]> <style> #ads {display:none;} #adsie {clear:both:margin-top:10px;} </style> <![endif]- -> </head> <body > <div id="wrapper"> <div id="head"> <div id="positioner"> <div class="menu"> <a class="outer" href= "../menu/index. html">DEMOS <table class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="Die Null Dollar-Anzeigenseite">Null Dollar< /a> <a class="inner" href="../menu/embed.html" title="Text um Bilder umbrechen">Text umbrechen</a> <a class=" inner" href="../menu/form.html" title="Formen gestalten">gestaltete Form</a> <a class="inner" href="../menu/nodots.html" title="Entfernen aktive/Fokus-Ränder">aktiver Fokus </a> <a class="innere Sekunde" href="../menu/hover_click.html" title="Hover/Klick ohne aktive/Fokus-Ränder">HOVER/KLICK > <table><tr><td > <a class="inner" href="../menu/form.html" title="Formen gestalten">gestaltete Form</a> <a class="inner" href= "../menu/nodots. html" title="Aktive/Fokus-Rahmen entfernen">aktiver Fokus</a> <a class="inner" href="../menu/hover_click.html" title="Hover/ Klicken ohne aktive/Fokus-Ränder" >Hover/Klicken</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="Schlagschatten mit mehreren Positionen">Schattenboxen</a> <a class="inner" href="../menu/old_master.html" title="Bildkarte für detaillierte Informationen">Bildkarte</ a> <a class="inner " href="../menu/bodies.html" title="Spaß mit Hintergrundbildern">lustige Hintergründe</a> <a class="inner" href="../menu /fade_scroll.html" title=" Scrollen ausblenden">Scrollen ausblenden</a> <a class="inner" href="../menu/em_images.html" title="Bilder in ihrer Größe vergleichen">in ihrer Größe Bilder</a> </td ></tr></table> </a> <a class="outer" href="index.html">MENUS <table class="first"><tr><td > <a class="inner" href="spies.html" title="eine codierte Liste von Spionen">Spionagemenü</a> <a class="inner" href="vertical.html" title="eine horizontale vertikales Menü">vertikales Menü</ a> <a class="inner" href="expand.html" title="eine vergrößernde ungeordnete Liste">vergrößerte Liste</a> <a class="inner" href="enlarge .html" title="eine ungeordnete Liste mit Linkbildern">Linkbilder</a> <a class="inner" href="cross.html" title="nicht rechteckige Links">nicht rechteckig</a> <a class="inner" href ="jigsaw.html" title="jigsaw links">Puzzle-Links</a> <a class="inner" href="circles.html" title="circular links">zirkuläre Links </a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">LAYOUTS <table class="first">< tr><td> <a class="inner" href="../layouts/bodyfix.html" title="Browserübergreifendes festes Layout">Behoben 1</a> <a class="inner" href=". ./layouts/body2.html" title="Browserübergreifendes festes Layout">Behoben 2</a> <a class="inner" href="../layouts/body4.html" title="Browserübergreifendes festes Layout" >Behoben 3</a> < a class="inner" href="../layouts/body5.html" title="Browserübergreifendes festes Layout">Behoben 4</a> <a class="inner" href= "../layouts/minimum. html" title="Ein einfaches Layout mit minimaler Breite">minimale Breite</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">BOXES <table class="first"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="Left Bildlaufleisten">Linksscrollen</ a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px Float Fix">IE6 3px Fix</a> <a class=" inner" href="../ boxen/snazzy.html" title="Snazzy borders">snazzy borders</a> <a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a > <a class="inner" href="../boxes/outside.html" title="Prozentsatz PLUS Pixel">% PLUS Pixel</a> <a class="inner" href="../boxes/ minwidth.html" title="min-width for IE">IE min-width</a> <a class="inner" href="../boxes/minheight.html" title ="min-height for IE" >IE min-height</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index. html">MOZILLA <table class= "first"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="Ein Dropdown-Menü">Dropdown-Menü< /a> <a class="inner" href="../mozilla/cascade.html" title="Ein kaskadierendes Menü">kaskadierendes Menü</a> <a class="inner" href="../mozilla /content.html" title=" Verwenden von content:">content:</a> <a class="inner" href="../mozilla/moxbox.html" title=":hover angewendet auf ein div">mozzie Box</a> <a class="inner" href="../mozilla/rainbow.html" title="Ich kann einen Regenbogen bauen">Regenbogenbox</a> <a class="inner" href=" ../mozilla/snooker.html " title="Snooker-Queue">Snooker-Queue</a> <a class="inner" href="../mozilla/target.html" title="Zielübung">Zielübung </a> <a class= "inner" href="../mozilla/splittext.html" title="Zweifarbige Überschriften">zweifarbige Überschriften</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="Schattentext">Schattentext</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">EXPLORER < table class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="Beispiel eins">Beispiel eins< /a> <a class="inner" href="../ie/weft.html" title="Weft-Schriftarten">Weft-Schriftarten</a> <a class="inner" href="../ie/ exampletwo.html" title="Vertical align">vertical align</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">Deckkraft <table class= "first"><tr><td> <a class="inner" href="../opacty/colours.html" title="colourwheel">undurchsichtige Farben</a> <a class="inner" href ="../opacty/picturemenu.html" title="ein Menü mit Deckkraft">undurchsichtiges Menü</a> <a class="inner" href="../opacty/png .html" title="partielle Opazität ">partielle Opazität</a> <a class="inner" href="../opacty/png2.html" title="partielle Opazität II">partielle Opazität II</a> </td></tr> </table> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">DEMOS</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="Die Null-Dollar-Anzeigen page">null Dollar</a ></li> <li><a class="inner" href="../menu/embed.html" title="Text um Bilder umbrechen">Text umbrechen</a> </li> <li>< a class="inner" href="../menu/form.html" title="Formen gestalten">gestaltete Form</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="Aktive/Fokus-Grenzen entfernen">aktiver Fokus</a></li> <li><a class="innere Sekunde" href=". ./menu/hover_click.html" title="Hover/Klick ohne aktive/Fokus-Ränder">HOVER/CLICK ></a> <ul id="a3"> <li><a class="inner" href= "../menu/form. html" title="Styling forms">stilisiertes Formular</a></li> <li><a class="inner" href="../menu/nodots.html" title ="Aktiv-/Fokusränder entfernen" >aktiver Fokus</a></li> <li><a class="inner" href="../menu/hover_click.html" title="Hover/Klick ohne Aktiv /focus borders">bewegen/klicken </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="Multi -position dropshadow">Shadow Boxing </a></li> <li><a class="inner" href="../menu/old_master.html" title="Image Map für detaillierte Informationen">Image Map </a></li> <li><a class="inner" href="../menu/bodies.html" title="Spaß mit Hintergrundbildern">lustige Hintergründe</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="fade-out scrolling">fade-scrolling</a></li> <li><a class="inner" href="../menu/ em_images.html" title="Bilder in EM-Größe im Vergleich">Bilder in EM-Größe</a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "outer" href="index.html">MENÜS</a></li> <li><a class="inner" href="spies.html" title="a codiert Liste der Spione">Spionagemenü< /a></li> <li><a class="inner" href="vertical.html" title="a horizontales vertikales Menü">vertikales Menü</a></li > <li><a class= "inner" href="expand.html" title="eine sich vergrößernde ungeordnete Liste">vergrößernde Liste</a></li> <li><a class="inner" href=" vergrößern.html" title="eine ungeordnete Liste mit Linkbildern">Linkbilder</a></li> <li><a class="inner" href="cross.html" title="nicht rechteckige Links" >nicht rechteckig</a> </li> <li><a class="inner" href="jigsaw.html" title="jigsaw links">Puzzle-Links</a></li> <li>< a class="inner" href= "circles.html" title="circular links">zirkuläre Links</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">LAYOUTS</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="Browserübergreifendes festes Layout">Behoben 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="Browserübergreifendes Layout behoben Layout">Behoben 2</a ></li> <li><a class="inner" href="../layouts/body4.html" title="Browserübergreifendes festes Layout">Behoben 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="Browserübergreifendes festes Layout">Behoben 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="Ein einfaches Layout mit minimaler Breite">minimale Breite</a></li> </ul> </div> <div class=" holder"> <ul> <li ><a class="outer" href="../boxes/index.html">BOXEN</a></li> <li><a class="inner" href= "../boxes/scrollbars. html" title="Linke Bildlaufleisten">Linker Bildlauf</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px Float Fix" >IE6 3px Fix</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy Grenzen</a></li > <li><a class="inner" href="../boxes/krazy.html" title="Krazy Korners">krazy korners</a></li> <li ><a class="inner" href="../boxes/outside.html" title="Prozentsatz PLUS Pixel">% PLUS Pixel</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="min-width for IE">IE min-width</a></li> <li><a class="inner" href="../boxes /minheight.html" title=" min-height for IE">IE min-height</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="outer" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="Ein Dropdown-Menü" >Dropdown-Menü</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="Ein kaskadierendes Menü"> Kaskadierendes Menü</a></ li> <li><a class="inner" href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a class=" inner" href="../mozilla/moxbox.html" title=":hover angewendet auf eine div">Mozzie-Box</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="Ich kann einen Regenbogen bauen">Regenbogenbox</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="Snooker-Cue">Snooker-Cue</a></li> <li><a class="inner" href="../mozilla/target.html" title="Target Üben">Ziel üben</a ></li> <li><a class="inner" href="../mozilla/splittext.html" title="Zwei Ton-Überschriften">Zwei Ton-Überschriften</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="Shadow text">Schattentext</a></li> </ul> </div > <div class="holder" > <ul> <li><a class="outer" href="../ie/index.html">EXPLORER</a></li> <li><a class ="inner" href=". ./ie/exampleone.html" title="Beispiel eins">Beispiel eins</a></li> <li><a class="inner" href="../ie /weft.html" title="Weft-Schriftarten">Weft-Schriftarten</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="Vertikale Ausrichtung" >vertikal ausrichten</a>< /li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">Deckkraft</a> </li> <li><a class="inner" href="../opacty/colours.html" title="colourwheel">undurchsichtige Farben</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="ein Menü mit Deckkraft">undurchsichtiges Menü</a></li> <li><a class=" inner" href="../ opacty/png.html" title="partielle Opazität">partielle Opazität</a></li> <li><a class="inner" href="../opacty/png2 .html" title="partielle Opazität II">partielle Opazität II</a></li> </ul> </div> </div> </div> </div> <!-- Ende des Kopfes - -> <div id="info "> <h2>DROP-DOWN-SPASS</h2> <h1>KEIN JAVASCRIPT</h1> <h1>NUR CSS!!!</h1> <h1 class="red">JETZT MIT CASCADE</h1> </h1> div> </div> </body> </html>
