Dropline Click Menü - Website X5 Hilfe - Die Helpsite

Das ist ein sehr interessantes und aufwendiges horizontales Menü, das ohne Imagedateien auskommt.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "dl_click-menu", das so übernommen werden kann. Zusätzlich befindet sich eine Datei (trigger.htc) im Verzeichnis, damit die Auslösung der Untermenüs auch im Internet Explorer erfolgen.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="dl_click-menu/menu_style.css" />

Variante 1

Code für das HTML-Objekt:

<div>
<ul id="dropline">
<li><a href="#">Hauptmenü 1</a></li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 2</a>
<ul>
<li><a href="#">Untermenü 2.1</a></li>
<li><a class="down" href="#" tabindex="1">Untermenü 2.2</a>
<ul>
 <li><a href="#">Untermenü 2.2.1</a></li><li><a href="#">Untermenü 2.2.2</a></li><li><a href="#">Untermenü 2.2.3</a></li><li><a class="down" href="#" tabindex="1">Untermenü 2.2.4</a>
 <ul>
   <li><a class="down" href="#" tabindex="1">Untermenü 2.2.4.1</a>
   <ul>
    <li><a href="#">Untermenü 2.2.4.1.1</a></li>
    <li><a href="#">Untermenü 2.2.4.1.2</a></li>
    <li><a href="#">Untermenü 2.2.4.1.3</a></li>
    <li><a class="down" href="#" tabindex="1">Untermenü 2.2.4.1.4</a>
    <ul>
     <li><a href="#">Untermenü 2.2.4.1.4.1</a></li>
     <li><a href="#">Untermenü 2.2.4.1.4.2</a></li>
     <li><a href="#">Untermenü 2.2.4.1.4.3</a></li>
     </ul>
</li>
    <li><a href="#">Untermenü 2.2.4.1.5</a></li>
    </ul>
</li>
   <li><a href="#" tabindex="1">Untermenü 2.2.4.2</a></li>
   <li><a href="#" tabindex="1">Untermenü 2.2.4.3</a></li>
   <li><a href="#" tabindex="1">Untermenü 2.2.4.4</a></li>
   </ul>
</li>
 <li><a href="#">Untermenü 2.2.5</a></li>
 <li><a href="#">Untermenü 2.2.6</a></li>
 </ul>
  </li>
<li><a href="#">Untermenü 2.3</a></li>
<li><a class="down" href="#" tabindex="1">Untermenü 2.4</a>
<ul>
 <li><a href="#">Untermenü 2.4.1</a></li>
 <li><a href="#">Untermenü 2.4.2</a></li>
 <li><a class="down" href="#" tabindex="1">Untermenü 2.4.3</a>
 <ul>
  <li><a href="#">Untermenü 2.4.3.1</a></li>
  <li><a href="#">Untermenü 2.4.3.2</a></li>
  <li><a href="#">Untermenü 2.4.3.3</a></li>
  <li><a href="#">Untermenü 2.4.3.4</a></li>
  </ul>
</li>
 <li><a href="#">Untermenü 2.4.4</a></li>
 </ul>
</li>
<li><a href="#">Untermenü 2.5</a></li>
<li><a href="#">Untermenü 2.6</a></li>
</ul>
</li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 3</a>
<ul>
<li><a href="#">Untermenü 3.1</a></li>
<li><a href="#">Untermenü 3.2</a></li>
<li><a href="#">Untermenü 3.3</a></li>
<li><a href="#">Untermenü 3.4</a></li>
</ul>
</li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 4</a>
<ul>
<li><a class="down" href="#" tabindex="1">Untermenü 4.1</a>
<ul>
 <li><a href="#">Untermenü 4.1.1</a></li>
 <li><a href="#">Untermenü 4.1.2</a></li>
 <li><a href="#">Untermenü 4.1.3</a></li>
 <li><a href="#">Untermenü 4.1.4</a></li>
 <li><a href="#">Untermenü 4.1.5</a></li>
 <li><a href="#">Untermenü 4.1.6</a></li>
 </ul>
</li>
<li><a class="down" href="#" tabindex="1">Untermenü 4.2</a>
<ul>
 <li><a href="#">Untermenü 4.2.1</a></li>
 <li><a href="#">Untermenü 4.2.2</a></li>
 <li><a href="#">Untermenü 4.2.3</a></li>
 <li><a class="down" href="#" tabindex="1">Untermenü 4.2.4</a>
 <ul>
  <li><a href="#">Untermenü 4.2.4.1</a></li>
  <li><a href="#">Untermenü 4.2.4.2</a></li>
  <li><a href="#">Untermenü 4.2.4.3</a></li>
  </ul>
</li>
 <li><a href="#">Untermenü 4.2.5</a></li>
 <li><a href="#" tabindex="1">Untermenü 4.2.6</a>
 <ul>
  <li><a href="#">Untermenü 4.2.6.1</a></li>
  <li><a href="#">Untermenü 4.2.6.2</a></li>
  </ul>
</li>
   </ul>
  </li>
<li><a href="#">Untermenü 4.3</a></li>
<li><a href="#">Untermenü 4.4</a></li>
<li><a href="#">Untermenü 4.5</a></li>
</ul>
</li>
<li><a class="down" href="#" tabindex="1">Hauptmenü 5</a>
<ul>
<li><a href="index.html">Untermenü 5.1</a></li>
<li><a href="index.html">Untermenü 5.2</a></li>
<li><a href="index.html">Untermenü 5.3</a></li>
</ul>
</li>
<li><a href="#x">Hauptmenü 6</a></li>
</ul>
</div>

Variante 2

Code für das HTML-Objekt:

<? include "dl_click-menu/index.html"; ?>

Code der CSS-Datei (menu_style.css):

/* Dieses ist eine feste CSS-Antwort des Hover-Tilde-Problems in Safari und Chrom */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
/* Auslöser für IE */
#dropline li a, body {behavior:url(trigger.htc)}

#dropline {position:relative; font-size:12px; height:38px; z-index:100; border-bottom:1px solid #000;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#dropline, #dropline ul {padding:0; margin:0; list-style:none; width:750px; text-align:center; border-top:1px solid #000;
-o-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
}

#dropline ul {position:absolute; top:0; left:-9999px; height:0;
-o-border-radius: 0 0 10px 10px;
-ms-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;

-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
#dropline ul {background:#383838; border-bottom:10px solid #383838;}
#dropline ul ul {background:#404040; border-bottom:10px solid #404040;}
#dropline ul ul ul {background:#484848; border-bottom:10px solid #484848;}
#dropline ul ul ul ul {background:#505050; border-bottom:10px solid #505050;}
#dropline ul ul ul ul ul {background:#585858; border-bottom:10px solid #585858;}

#dropline li {display:inline; height:38px;}
#dropline li a {display:inline-block; height:38px; line-height:38px; padding:0 20px 0 10px; font-family:arial, sans-serif; font-size:11px; color:#aaa; text-shadow: 1px -1px 1px #000; text-decoration:none; font-weight:bold; outline:0; text-transform:uppercase;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
#dropline ul li a {font-size:0;}

#dropline li a.down {color:#c63;}
#dropline li ul li a.down {font-size:11px; color:#c63;}

#dropline li:hover > a {color:#fff;}

#dropline li > a:active {color:#fc6;}
#dropline li > a.down:active {color:#fc6;}

#dropline li > a:focus {color:#fc6;}
#dropline li > a.down:focus {color:#fc6;}

#dropline li:hover > a.down {color:#fc6;}

#dropline li a:active + ul {top:37px; left:0; height:38px;}
#dropline li a:active + ul > li > a {font-size:11px;}

#dropline li a:focus + ul {top:37px; left:0; height:38px;}
#dropline li a:focus + ul > li > a {font-size:11px;}

#dropline li > ul:hover {top:37px; left:0; height:38px;}
#dropline li > ul:hover > li > a {font-size:11px;}