✔ Ein alter Bekannter: CSS-Dropdown

Status
Nicht offen für weitere Antworten.
philishake

philishake

javascript enthusiast
Hi Leute,

ich weiß es gibt schon 100te von css-dropdown Topics, und ich habe auch grad an die 20 gelesen. Aber seit IE7 funktioniert irgendie nichts mehr wie es soll. SIehe folgendes Beispiel, mit dem ich mich seit Tagen quäle:

css:
Code: 
/* ================================================================ 
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/dd_valid.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.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:2px 0 100px 0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

html:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
 <link rel="stylesheet" media="all" type="text/css" href="final_drop.css" />

  </head>
  <body>
   <div class="menu">

<ul>
<li><a href="./menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="drop" href="./menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a class="drop" href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
	<li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
	<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
	<li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
	<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="left">
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

</div>

  </body>
</html>

Im Firefox 2.0 läuft es super, nur im IE7 nicht. IE6 kann ich net sagen, hatte noch keine Testmöglichkeit...

Danke schonmal für eure Hilfe
 
Je nach eingesetztem Doctype werden die Browser in einen bestimmten "Darstellungs-Modi" geschaltet.

Mit dem verwendeten Dokumenttyp
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
läuft der IE im "Quirks-Mode" und verhält sich wie seine 5er-Vorgängerversionen, die u.a. das Boxmodell falsch interpretieren.

Siehe hierzu auch Doctype-Switching & Browser-Übersicht

Das Dokument muß aber im "Standards-Mode" (Strict-Variante) übergeben werden.

Zum Vergleich kannst du nochmal einen Blick in den Original-Quellcode von Stu Nicholls werfen ;)
 
Ah, verstehe.
Also ich hab den geändert und es funktioniert astrein. BESTEN DANK.
Für alle andern hier mein verwendeter Doctype:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
Hi,

grundsätzlich kannst du die Positionierung der zweiten Menüebene in den Selektoren

Code: 
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}
vornehmen. Nur wenn die Position weiter entfernt ist, als die Hauptmenüpunkte hoch sind, verschwindet das Submenü wieder, sobald die Maus den Link der ersten Menüebene verlässt.
 
Jo, das ist genau das was ich brauche, nur leider gibt es da kein Code zum laden, so dass man sich mal dran probieren könnte. Hast du sowas zufällig da?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück