Dropdown Menü

[Marc Sch]

Hallo zusammen,

ich bin gerade dabei für einen bekannten eine Homepage zu erstellen. Bisherige Projekte habe ich immer mit Contao gemacht. Nun hab ich aber ein von einem Verband vorgefertigests Template das es nur für Joomla gibt.

Ich möchte gerne das wenn ich mit der Maus über die Hauptmenüpnukte fahre sich das Drop Down Menü öffnet. Dies geschieht aktuell nur wenn ich den Punkt einmal angeklickt habe. Dann öffnet es sich wenn ich mit der Maus wieder drüber fahre und schließt sich wenn die Maus dort nicht drauf liegt.

Der CSS Code:

#horiz-menu ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

#horiz-menu li {
display: block;
float: left;
margin: 0px;
padding: 0;
height: 39px;
background: none;
background-color: transparent;
border-left: 1px solid #999;
position: relative;
color: #333;
}
#horiz-menu li:first-child { border-left: none; }

#horiz-menu li span {
display: block;
float: left;
cursor: pointer;
}

#horiz-menu li span.separator {
color: #999;
line-height: 20px;
padding: 6px 0 0 0;
margin: 0;
text-align: left;
}

#horiz-menu a {
text-decoration: none;
display: block;
float: left;
height: 39px;
line-height: 39px;
padding: 0 8px;
color: #333;
font-weight: bold;
text-transform: uppercase;
}
#horiz-menu a:hover { text-decoration: none !important; background-color: #fff; }
#horiz-menu li:hover, #horiz-menu li.sfHover { background-color: #fff; color: #333; }
#horiz-menu li.parent:hover, #horiz-menu li.parent.sfHover { height: 43px;}

#horiz-menu li li {
padding: 0;
margin: 0;
line-height: 23px;
height: 24px;
border-left: none;
background: url('../images/bg-submenu.png') repeat-y;
width: 200px;
padding: 0 8px 0 7px;
/*float: none;*/
}
#horiz-menu li li.parent:hover, #horiz-menu li li.parent.sfHover { height: 24px; }

#horiz-menu li li a, #horiz-menu li li a:hover {
text-decoration: none;
display: block;
float: left;
height: 23px;
line-height: 23px;
padding: 0 9px 0 25px;
font-size: 0.8em;
margin: 0;
background: transparent url('../images/pfeil-menu.gif') 13px 50% no-repeat;
width: 166px;
border-top: 1px solid #999;
}
#horiz-menu li li:first-child a, #horiz-menu li li:first-child a:hover { border: 0; height: 24px; }
#horiz-menu li li:first-child li a, #horiz-menu li li:first-child li a:hover { border-top: 1px solid #999; height: 23px; }
#horiz-menu li li li:first-child a, #horiz-menu li li li:first-child a:hover { border: 0; height: 24px; }


#horiz-menu li li a span {
text-transform: none;
padding: 0;
margin: 0;
font-weight: bold;
}

#horiz-menu li ul {
float:none;
left:-999em;
position:absolute;
width: 215px;
z-index: 100;
}

#horiz-menu li:hover ul, #horiz-menu li.sfHover ul {
left: -7px;
top: 43px;
background: url('../images/bg-submenu-bottom.png') left bottom no-repeat;
padding: 0;
padding-bottom: 14px;
}

#horiz-menu li:hover li ul, #horiz-menu li.sfHover li ul,
#horiz-menu li li:hover ul ul, #horiz-menu li li.sfHover ul ul { display: none; visibility: hidden; top: 8px;}

#horiz-menu li li:hover ul, #horiz-menu li li.sfHover ul,
#horiz-menu li li li:hover ul, #horiz-menu li li li.sfHover ul {
left: 200px;
top: 8px;
width: 215px;
z-index: 1000;
display: block;
visibility: visible;
}

#horiz-menu li li li:hover ul, #horiz-menu li li li.sfHover ul { z-index: 2000; }

/*#horiz-menu li li li { z-index: 5000; }
#horiz-menu li li li li { z-index: 6000; }
*/

#horiz-menu li a:hover, #horiz-menu li.active { background-color: #fff; }
#horiz-menu li li:hover, #horiz-menu li li.sfHover, #horiz-menu li li.active { background-color: transparent; }
#horiz-menu li li:hover a, #horiz-menu li li.current a { background-color: #dedede; }

#horiz-menu li li:hover li a, #horiz-menu li li.current li a { background-color: #fff; }
#horiz-menu li li li:hover a, #horiz-menu li li li.sfHofer a,
#horiz-menu li li.current li:hover a, #horiz-menu li li.current li.sfHover a { background-color: #dedede; }
#horiz-menu li li li:hover li a, #horiz-menu li li.current li:hover li a { background-color: #fff; }
#horiz-menu li li li li:hover a, #horiz-menu li li li li.sfHofer a,
#horiz-menu li li.current li li:hover a, #horiz-menu li li.current li li.sfHover a { background-color: #dedede; }
#horiz-menu li li.active a, #horiz-menu li li li.active a { background-color: #dedede; }


Ich hoffe ihr könnt mir helfen.

Viele Dank

[lottikarotti]

Hallöchen,

was hat das mit PHP zu tun?

Viele Grüße,
lotti

[Gast]

man kann auch code tags verwenden.

[drsoong]

Dass ein hover-Effekt nur funktioniert, wenn einmal auf das Element geklickt wurde, deutet m. E. darauf hin, dass das Menü auch von Javascript abhängig ist.