Hallo,
Ich versuche nun seit Tagen das CSS Dropdownmenue zum laufen zu bekommen, aber immer wieder stoße ich auf Probleme.
Ich habe das TS von ArminB hier aus dem Forum verwendet.
(Danke an dieser Stelle nochmals an Armin)
Für die CSS Datei hab ich die von CSS-Play genommen und bin gerade dabei alles an mein Design anzupassen.
Zum Testen benutze ich folgende Browser: Opera, IE 5.5, IE 6, IE 7 und Firefox 2.004
Nun zu meinen Problemen
Bei Opera schaffe ich es nicht auf die 2.Ebene zu kommen, weil diese sofort wieder verschwindet wenn ich versuche drauf zufahren.
Im IE 5.5 und IE6 funktioniert die 2.Ebene Problemlos, allerdings wird die 3.Ebene nicht angezeigt.
Im IE 7 werden überhaut keine Untermenüs angezeigt 🙁
Im Firefox funktioniert alles soweit richtig, bis auf das die 3.Ebene immer direkt mit der 2.Ebene Angezeigt wird.
Damit Ihr Euch ein Bild davon machen könnt hier mal der Link:
http://www.siw-typo3.de
#angry# #angry# Wäre echt klasse wenn mir da jemand weiterhelfen könnte!!! #angry# #angry#
hier noch mein TS und CSS
page.10.marks.DROPDOWN = HMENU
page.10.marks.DROPDOWN{
special = directory
special.value = 3
wrap = <div class="menu"> | </div>
# Hauptmenue
1 = TMENU
1 {
wrap = <ul> | </ul>
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
}
}
2 = TMENU
2 {
wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></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
}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#pmenu {
display:block;
z-index:200;
margin: 0;
padding: 0;
font-size: 12px;
}
/* remove all the bullets, borders and padding from the default list styling */
#pmenu ul {
padding:0;
margin:0;
list-style-type:none;
}
#pmenu ul ul {
width:106px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#pmenu li {
padding:0;
margin:0;
float:left;
width:106px;
position:relative;
}
/* style the links for the top level */
#pmenu a, #pmenu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#fff;
width:98px;
height:20px;
border-left: #ffffff 1px solid;
background: url(../img/nav_d_bg.jpg) repeat-x;
padding-left:7px;
line-height:1.7em;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html #pmenu a, * html #pmenu a:visited {
width:106px;
w\idth:95px;
}
/* style the second level background */
#pmenu ul ul a.drop, #pmenu ul ul a.drop:visited {
background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the second level hover */
#pmenu ul ul a.drop:hover{
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
#pmenu ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
#pmenu ul ul ul a, #pmenu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
#pmenu ul ul ul a:hover {
background:#b2ab9b;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#pmenu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html #pmenu ul ul {
top:20px;
t\op:21px;
}
/* position the third level flyout menu */
#pmenu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
#pmenu ul ul ul.left {
left:-150px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
#pmenu table {position:absolute; top:0; left:0;}
/* style the second level links */
#pmenu ul ul a, #pmenu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html #pmenu ul ul a{
width:150px;
w\idth:129px;
}
/* style the top level hover */
#pmenu a:hover, #pmenu ul ul a:hover{
color:#fff;
background:#949e7c;
}
#pmenu :hover > a, #pmenu ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* make the second level visible when hover on first level list OR link */
#pmenu ul li:hover ul,
#pmenu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
#pmenu ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
#pmenu ul :hover ul :hover ul{
visibility:visible;
}