Hallo,
leider komm ich mit meinen DropDown-Menü nicht klar...
habe eine HTML Templatedatei erstellt:
im head:
<script type="text/javascript">
//<![CDATA[
function show(element){
element.className += "hover";
}
function hide(element){
element.className = element.className = "";
}
//]]>
</script>
im template:
<!-- ANFANG NAVI -->
<div id="navi">
<ul class="navigation">
<li><a href="#">Startseite</a></li>
<li onmouseover="show(this)" onmouseout="hide(this)">
<a href="#" class="active">tester</a>
<ul onmouseover="show(this)" onmouseout="hide(this)">
<li><a href="#">Ebene2 Punkt1</a></li>
<li><a href="#">Ebene2 Punkt2</a></li>
<li><a href="#">Ebene2 Punkt3</a></li>
</ul>
</li>
<li><a href="#">Forum</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>
navi css:
#navi {
position:absolute;
margin: 0px;
margin-top: 94px;
margin-left: 100px;
padding: 0px;
height: 21px;
}
ul.navigation, ul.navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.navigation a {
display: block;
margin: 0px 0px 0px 0px;
padding: 5px 12px 4px 12px;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
color: #f0f0f0;
text-decoration: none;
border-left: 5px #3a3a45 solid;
}
ul.navigation a:hover {
margin: 0px 0px 0px 0px;
padding: 5px 12px 4px 12px;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
color: #6b6b74;
text-decoration: none;
}
ul.navigation a.active {
color: #6b6b74;
}
ul.navigation ul a {
margin: 0px;
padding: 0px;
}
ul.navigation li {
margin: 0px;
padding: 0px;
background-image: none;
float:left;
border: 0px;
}
ul.navigation ul {
margin-left:0;
padding: 0 0 5px 0;
position: absolute;
background-color: #3a3a45;
border-left:1px solid #6b6b73;
border-right:1px solid #6b6b73;
border-bottom:1px solid #6b6b73;
display:none;
min-width: 150px;
}
/* IE-Hack für die Breite */
*html ul.navigation ul {
width: 150px;
}
/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste befindet (.hover siehe JavaScript oben) */
ul.navigation ul.hover, ul.navigation li.hover ul, ul.navigation li:hover ul {
display:block;
}
ul.navigation ul li {
float:none;
background-color: transparent;
}
ul.navigation ul li a {
margin: 0px 0px 0px 0px;
padding: 5px 0px 4px 3px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #f0f0f0;
text-decoration: none;
}
ul.navigation ul li a:hover {
margin: 0px 0px 0px 0px;
padding: 5px 0px 4px 3px;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #6b6b74;
text-decoration: none;
}
in meinen xhtml-Template funktioniert alles super!
doch bau ich das navi in mein typo3 ein, funktioniert es nicht...
navi typo3:
# ---------------------
# MainNavi
# ---------------------
temp.menu = HMENU
temp.menu {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul class="navigation">|</ul>
noBlur = 1
expAll = 1
#NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
NO.wrapItemAndSub = <li>|</li> || <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li>|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
### Zweite Ebene ###
2 = TMENU
2 {
noBlur = 1
wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
NO.allWrap = <li>|</li>
}
}
sobald ich über "tester" hover, und dann von dem hover runter gehe, verschwindet der navibutton einfach aus dem navi!
Würde mich über Hilfe sehr freuen!
grüße, Basti