nicht angemeldet
Probleme mit CSS-Dropdown
Hallo Leute,
ich habe ein Problem.
Und zwar habe ich mich nach langer Zeit doch mal wieder an ein CSS-Dropdown-Menü gewagt (ich habe nicht wirklich viel Erfahrung und bin schon ein paar mal an Kleinigkeiten gescheitert...)
Jetzt habe ich mit einem Programm namens "CSS Menu Generator" einen Quelltext erzeugt, samt IE-Browser-Weichen. Hat auch offline alles super ausgeschaut, aber wenn ich es hochlade, verschwindet nach dem 2. mal hovern der jeweils erste Unterpunkt!?!
HTML-CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="holyrumble/menu_style.css" />
</head>
<body bgcolor="#E66A21">
<div style="width:954px; height:600px; position:absolute; left:50%; top:50%; margin-left:-477px; margin-top:-300px;">
<img src="homepage%20neu%20Kopie.jpg">
<div class="pd_menu_01 " style="position:absolute; top:35px; left:67px;x">
<ul><li><img src="_.gif" height="40px" width="68px"><!--[if IE 7]><a href="index.htm"><!--></a><!--<![endif]--><!--[if IE]><table><tr><td>
<![endif]-->
<ul style="top:39px;">
<li><a href="http://www.google.de" >Punkt 1</a></li>
<li><a href="http://www.google.de" class="lastone">Der neue Punkt 2!</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
</div>
<div class="pd_menu_01 " style="position:absolute; top:56px; left:170px;">
<ul><li><img src="_.gif" height="28px" width="62px"><!--[if IE 7]><a href="index.htm"><!--></a><!--<![endif]--><!--[if IE]><table><tr><td>
<![endif]-->
<ul style="top:27px;">
<li><a href="http://www.google.de" >Punkt 1</a></li>
<li><a href="http://www.google.de" class="lastone">Der neue Punkt 2!</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
</div>
</div>
</body>
</html>
CSS-CODE
.pd_menu_01 {float:left; font-variant:small-caps; padding:0; margin:0;color: #FFFFFF; border: 0px;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
img {border:0px;}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0; border:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:0; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #E66A21;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; line-height:30px; padding:0; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none; color:#ffffff;background:#E66A21; }
.pd_menu_01 ul li:hover a {background-color:#E66A21; text-decoration:none; color:#ffffff;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; background-image:url('Unbenannt-1.gif'); width:80px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px; border-left:solid 0px #004080; border-bottom: solid 1px #fae1d3; background-color:#E66A21; color:#fae1d3;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#fae1d3; background-image:url('homepage-neu_03.gif');text-decoration:none;color:#E66A21;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #E66A21;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 0px #004080; border-bottom: solid 0px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
-
Im Internet-Explorer 7 - hab ich vergessen zu sagen ;)
Danke
-
Hi,
Jetzt habe ich mit einem Programm namens "CSS Menu Generator" einen Quelltext erzeugt, samt IE-Browser-Weichen.
Ich kann nur wieder und wieder davon abraten, irgendwelche "Loesungen" einzusetzen, die dem IE invaliden Mist-Code vorsetzen, in dem sie Tabellen in Links verschachteln. Mit derart grob fehlerhaftem Code kann man alles bekommen - ausser einem vorhersehbaren Ergebnis.
So sieht eine sinnvolle Loesung aus:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modernMfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“