DropDown Automatic Menü - Website X5 Hilfe - Die Helpsite

Das ist ein einfaches horizontales Menü mit Hintergrundbalken als Imagedatei.
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 "dd_automatic-menu", das so übernommen werden kann. Zusätzlich befindet sich eine Adobe-Photoshop-Datei (menu_background.psd) dabei, mit der Backgroundleiste. 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="dd_automatic-menu/menu_style.css" />

Variante 1

Code für das HTML-Objekt:

<div>
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 1</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 2 langer Text</span></a>
 <ul class="sub">
  <li><a href="#">Untermenü 1.1 langer Text</a></li>   
  <li><a href="#">Untermenü 1.2</a></li>
           <li><a href="#">Untermenü 1.3</a></li>
           <li><a href="#">Untermenü 1.4</a></li>
           <li><a href="#">Untermenü 1.5</a></li>
 </ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 3</span></a>
 <ul class="sub">
  <li><a href="#">Untermenü 3.1 langer Text</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 class="top"><a href="#" class="top_link"><span>Hauptmenü 4</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Hauptmenü 5</span></a></li>
</ul>
</div>

Variante 2

Code für das HTML-Objekt:

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

Code der CSS-Datei (menu_style.css):

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(img/menu_background.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(img/menu_arrow-down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(img/menu_button-b.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(img/menu_button-b.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(img/menu_button-a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(img/menu_button-b.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(img/menu_button-b.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(img/menu_button-a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(img/menu_arrow-right.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(img/menu_arrow-over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(img/menu_arrow-over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}