nicht angemeldet
Hi,
ich würd mir gerne ein neues Menü für meine hp zulegen.
Ich hab auch schon fast das perfekte gefunden:
http://www.cssplay.co.uk/menus/slide_fly.html
nun hab ich aber das problem, dass es im firefox und im ie perfekt funktioniert, jedoch im netscape (7.1) verschiebt sich das Untermenü 2 von der eigentlichen Position (neben dem Untermenüpunkt 1) an das obere ende der homepage.
hier mal das css script:
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
nach etwas rumprobieren, ist mir das problem: "top:0;" aufgefallen. wenn ich dem aber einem wert zuweise, dass verschiebt sich der Untermenüpunkt 2, jedoch kommt er um eine Zeile zu tief raus und man kann ihn nichtmehr auswählen.
kann mir jemand helfen?