nicht angemeldet
Hallo,
Achtung: "... für moderne Browser" es funktioniert nicht im IE
Leider habe ich den Link zur Originalquelle verbummelt, deshalb poste ich dir den gesamten Quelltext. Das funktioniert zumindest mit FF und IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Drop Down Menu Example</title>
<style type="text/css">
.menu {display:none;}
#noniemenu {position:absolute;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<a class="outer" href="#">Home
</a>
<a class="outer" href="#">Pages
<table><tr><td>
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</td></tr></table>
</a>
<a class="outer" href="#">Photo Albums
<table><tr><td>
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</td></tr></table>
</a>
<a class="outer" href="#">Blogs
<table><tr><td>
<a class="inner" href="#">Mostly</a>
</td></tr></table>
</a>
</div>
<div id="noniemenu">
<div class="holder">
Home<br />
</div>
<div class="holder">
Pages<br />
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</div>
<div class="holder">
Photo Albums<br />
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</div>
<div class="holder">
Blogs<br />
<a class="inner" href="#">Mostly</a>
</div>
</div>
<p> </p>
<p>This is just a test page to show how the menu can be made to overlap the content.</p>
<p>This is achieved by taking the menu out of the page flow and giving it a position:absolute.</p>
<p>If you check the menu above it should overlap this text.</p>
<p>For Firefox I have added an extra containing div that has a position:absolute;</p>
<p>Oh, and you must have the !DOCTYPE specified or Firefox etc will not work.</p>
<p>Please send any questions or comments to me.</p>
<p>REMEMBER : THIS IS JUST FOR FUN ;O)</p>
</body>
</html>
bydey
--
-- bydey ist die Signatur und Verabschiedung, nicht der Nick --
-- Navigate all your PHP web projects with PHP Project Browser--
-- bydey ist die Signatur und Verabschiedung, nicht der Nick --
-- Navigate all your PHP web projects with PHP Project Browser--