Start CSS

Unterlagen

Bilder & Farben
Content-Management
CSS
Drupal
Fotogalerie
HTML
Internet Marketing
Joomla
Webseiten gestalten
 

Recht

Überblick
zu beachten
Impressum
Datenschutz
Datenschutzerklärung
 

Bücher & Links

HTML & CSS
Farben
Shop-Systeme
PHP, Mysql, Joomla
 

Sprache

Lexika
 
CSS - horizontales Drop Down Menu mit CSS PDF Drucken E-Mail

Folgendes Beispiel bietet ein horizontales Menü mit Drop Down.

 

Achtung: Im Internet Explorer funktioniert der hover nur über einem link, also nicht li:hover sondern li a:hover.

 

In der HTML wird für den Internet Explorer ein Link und eine Tabelle über den Menüpunkt gelegt, damit der a:hover die Untermenüpunkte anzeigt:

Die genaue Doctype Angabe ist notwendig, damit der Internet Explorer nicht in Quirks Mode reagiert, das heißt, selbst Unterschiede zu Standardbrowsern auszugleichen versucht.

 

<!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 name="description" content="Das schönste, größte, beste Straßenfest Frankfurts .."/>

<meta name="keywords" lang= "de" content="Schlüsselbegriffe, Ihrer  Webseite, mit Kommas getrennt"/>

<meta name="language" content="deutsch, de, German"/>

<meta name="robots" content="index, follow"/>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<meta http-equiv="expires" content="43200"/>

<meta http-equiv="content-language" content="de"/>

<meta name="revisit-after" content="2 days"/>

<title>Sommerfest 2010</title>

<link rel="stylesheet" href='strassenfest.css' type="text/css"/>



<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="/ie.css" />

<![endif]-->





</head>



<body >



<h1>Sommerfest 2010</h1>

      

<ul>

   <li><a href="#">Startseite</a></li>

   

     

     

   <li><a href="#">Programm <!--[if !lte IE 6]><![IGNORE[-->  <![IGNORE[]]> </a>      <![endif]-->  
                    <!--[if lte IE 6]><table><tr><td>    <![endif]-->

           <ul>

               <li><a href="#">Musik</a></li>

               <li><a href="#">Theater</a></li>

            </ul>

            <!--[if lte IE 6]></td></tr></table></a><![endif]-->       

        

   </li>

   <li><a href="#">über uns</a></li>

   <li><a href="#">Kontakt</a></li>

</ul>







</body>

</html>

 

Menü

CSS für IE Explorer6

CSS

 

Beispiele für Cross Browser CSS Menüs finden Sie hier http://www.cssplay.co.uk

 

 
 

Das könnte Sie außerdem interessieren