[TYPO3-german] horizontales Drop-Down-Menü

[Rainer Mihlan]

Hallo Björn,

Am 02.10.2010 17:28, schrieb Hahnefeld Bjoern:
> Hallo zusammen,
>
> ich versuche gerade, ein horizontales Drop-Down-Menü zu bauen. Zwei Probleme habe ich dennoch:
>



hier ist ein Ansatz, den ich mal irgendwo aufgegriffen und überarbeitet 
habe, seitdem habe ich diese Navi schon in ähnlicher Form in einigen 
Projekten eingesetzt. Die dritte Ebene wird dann nach rechts 
ausgeklappt, falls sie benötigt wird. Für Deine Zwecke wirst Du 
sicherlich noch einige Pixel schubsen müssen.

Viele Grüße
Rainer


CSS:

/* Anfang Hauptnavigation im Header */

#nav ul
{
	float: left;
	list-style: none;
	margin-left: 0px !important;
	margin-bottom: 0;
}

#nav li
{
	float:left;
	padding: 0px 0px;
	margin: 0px 0px 0px 0px;
	line-height:35px;
	position:relative;
}

#nav li a
{
	float:left;
	display:block;
	padding: 0px 0px 1px 0px;
}

#nav li a:hover
{
	float:left;
	display:block;
	padding: 0px 0px 1px 0px;
}

#nav li.act a
{
	float:left;
	display:block;
	padding: 0px 0px 1px 0px;
}


/* Ende Hauptnavigation im Header */


/* dropdown header */

#nav ul li ul
{
	display: none;
	position:absolute;
	top:0;
	left: -20px;
	padding-top:6px;
	margin-left: 0 !important;
	margin-top:30px;
}

#nav ul li:hover ul
{
	display:block;
	width:200px;
}

#nav ul li:hover ul li
{
	height: 28px !important;
	display: block !important;
	width: 198px !important;
	border-left: 1px solid #7b2122 !important;
	border-right: 1px solid #7b2122 !important;
	border-bottom: 1px solid #7b2122 !important;
	margin: 0 !important;
}

#nav ul li:hover ul li ul
{
	display: none;
}

#nav ul li:hover ul li a
{
	display:block;
	width: 188px !important;
	line-height: 27px;
	padding-left:10px;
}

#nav ul li:hover ul li a:hover
{
}

#nav ul li:hover ul li:hover ul
{
	display:block;
	position:absolute;
	left:200px; top:-27px;
	padding-left: 1px;
}

#nav ul li:hover ul li:hover ul.left
{
	left:-200px;
}

/* dropdown header Ende */

HTML:

<div id="nav">
   <div class="hlist">
   <!-- main navigation: horizontal list -->
     <ul>
       <li class="no"><a href="#">Home</a></li>
       <li class="no"><a href="#">Wir über uns</a>
         <ul>
           <li class="no"><a href="#">Allianzen</a></li>
           <li class="no"><a href="#">Mitarbeiter</a></li>
         </ul>
       </li>
        [...]
     </ul>
   </div>
</div>