Ich habe ein CSS Dropdownmenü in meine Seite eingebunden es funktioniert alles tadellos bis auf eine Kleinigkeit die mich nervt, unzwar werden die 3ten ebenen nicht erst beim hover angezeigt sondern beim erscheinen der 2ten Ebene.
tmp.MENU= HMENU
tmp.MENU {
special = directory
# Hier die Start-ID angeben
special.value = {$eingangspid}
wrap = <div class="me"> | </div>
# Hauptmenue
1 = TMENU
1{
wrap = <ul> | </ul>
expAll = 1
NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>
NO.stdWrap.prepend = COA
NO.stdWrap.prepend.10.wrap = ~ |
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
}
ACT < .NO
ACT = 1
ACT.ATagParams = class=dropact
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class=dropact
}
2 = TMENU
2{
wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
expAll = 1
NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
ATagParams = class=drop
}
}
3 < .2
4 < .2
}
#lib.demo_ts < tmp.MENU
.me {
width:750px;
font-size:0.85em;
position:relative;
z-index:100;
}
/* remove all the bullets, borders and padding from the default list styling */
.me ul {
padding:0;
margin:0;
list-style-type:none;
}
.me ul ul {
width:100px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.me li {
float:left;
width:100px;
position:relative;
}
/* style the links for the top level */
.me a,
.me a:visited {
display:block;
font-size:11px;
text-align: center;
text-decoration:none;
color:#000000;
width:100px;
height:30px;
border-width:1px 1px 0 0;
background:#cccccc;
padding-left:0px;
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .me a,
* html .me a:visited {
width:100px;
w\idth:100px;
}
/* style the second level background */
.me ul ul a.drop,
.me ul ul a.drop:visited {
background:#ccccc url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the second level hover */
.me ul ul a.drop:hover{
background: #ccccc url(../../graphics/drop.gif) no-repeat right;
}
.me ul ul :hover > a.drop {
background:#ccccc url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.me ul ul ul a,
.me ul ul ul a:visited {
background:#ccccc;
}
/* style the third level hover */
.me ul ul ul a:hover {
background:#ccccc;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.me ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:100px;
}
/* another hack for IE5.5 */
* html .me ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.me ul ul ul{
left:100px;
top:0;
width:100px;
}
/* position the third level flyout menu for a left flyout */
.me ul ul ul.left {
left:-100px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.me table {position:absolute; top:0; left:0;}
/* style the second level links */
.me ul ul a,
.me ul ul a:visited {
background: #fff;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:100px
/* yet another hack for IE5.5 */
}
* html .me ul ul a{
width:100px;
w\idth:100px;
}
/* style the top level hover */
.me a:hover,
.me ul ul a:hover{
color:#fff;
background: #002f84;
}
.me :hover > a,
.me ul ul :hover > a {
color:#fff;
background: #002f84;
}
/* make the second level visible when hover on first level list OR link */
.me ul li:hover ul,
.me ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.me ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.me ul :hover ul :hover ul{
visibility:visible;
}