CSS Pulldown Menü - Website X5 Hilfe - Die Helpsite

Das ist ein straff aber schön gehaltenes farbenfrohes vertikales 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 "cs_pulldown-menu", das so übernommen werden kann. Zusätzlich befindet sich eine Datei (hover.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="cs_pulldown-menu/menu_style.css" />

Variante 1

Code für das HTML-Objekt:

<div class="mainmenu">
<ul>
     <li class="li_nc"><a href="#x" target="_self" >Hauptmenü 1</a></li>
     <li class="li_hc"><a href="#" target="_self" >Hauptmenü 2</a><ul class="ul_ch">
        <li class="li_hc"><a href="#" target="_self" >Untermenü 2.1</a><ul class="ul_ch">
           <li class="li_hc"><a href="#"  >Untermenü 2.1.1</a><ul class="ul_ch">
              <li class="li_nc"><a href="#"  >Untermenü 2.1.1.1</a></li>
              <li class="li_nc"><a href="#"  >Untermenü 2.1.1.2</a></li>
              <li class="li_nc"><a href="#"  >Untermenü 2.1.1.3</a></li>
           </ul></li>
           <li class="li_nc"><a href="#"  >Untermenü 2.1.2</a></li>
        </ul></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 2.2</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 2.3</a></li>
     </ul></li>
     <li class="li_hc"><a href="#" target="_self" >Hauptmenü 3</a><ul class="ul_ch">
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.1</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.2</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.3</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.4</a></li>
        <li class="li_nc"><a href="#" target="_self" >Untermenü 3.5</a></li>
     </ul></li>
     <li class="li_nc"><a href="#"  >Hauptmenü 4</a></li>
     <li class="li_nc"><a href="#"  >Hauptmenü 5</a></li>
     <li class="li_nc"><a href="#"  >Hauptmenü 6</a></li>
</ul>
</div>

Variante 2

Code für das HTML-Objekt:

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

Code der CSS-Datei (menu_style.css):

body {
behavior:url("hover.htc");
}

.mainmenu{
 width: 15em;
 padding: 0;
 float: left;
}

.mainmenu ul {
 float: left;
 width: 100%;
 list-style: none;
 line-height: 1;
 color:#FFFF00;
 background: #000080;

 padding: 0;
 border: solid #A0A0A4;
 border-width: 1px 1px;
 margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
 display: block;
 width: 100%;
font-family:Arial, Helvetica, sans-serif;font-size:1.0em;font-weight:bold;font-style:normal;text-decoration:underline;
 color: #FFFF00;
 text-decoration: none;
 padding: 1em 0em;
 text-indent:1em;
 margin: 0;

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
 width:100%;
 height:100%;
}
.mainmenu ul a{
  width: 100%;
}


.mainmenu li  {
 float: left;
 width:100%;
 margin:0;
 padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li  {width:100%;}

.mainmenu li ul {
 position: absolute;
 left: -999em;
 height: auto;
 width:15em;
 background: #000080;
 font-weight: normal;
 border-width: 1px;
 margin: 0;
}

.mainmenu li li {
 width: 100% ;
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
 width: 100%;
}

.mainmenu li ul  {
 margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
 margin: -2.1em 0 0 -0.3em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
 left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
 left: 100%;
}
.mainmenu li:hover>ul.ul_ch   
{
 left: 100%;
}

.mainmenu li:hover{
 background: #FF0000;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
 color:#FFFF00;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
 color:#FFFF00;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
 background: #B90000;
 z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
 color: #FFFF00;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
 color: #FFFF00;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
 color: #FFFF00;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
 color: #FFFF00;
}