Tipps und Tricks: Menüs mit Schatten
Mit einem einfachen Trick kannst du Menüs im <div>-Container mit einem Schatten versehen und diese ohne absolute Positionierung im normalen Textfluss einfügen.
,
,
,
,
...
#shadow {
width:8em;
margin-left:2em;
margin-top:2em;
background-color:#bbbbbb;
}
#shadow ul {
position:relative;
right:1em;
bottom:1em;
background-color:#F0F4D6;
border:1px solid #000000;
padding: 5px;
list-style: none;
}
...
<div id="shadow">
<ul>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
</ul>
</div>
Du benötigst zwei Blockelemente die
verschachtelt werden. Das äußere
(div#shadow) enthält
den Schatten, d.h. einen dunklen Hintergrund (background-color:#bbbbbb;).
Das innere (ul)) liegt über dem Schatten und enthält das Menü.
Es wird über den Kontextselektor #shadow ul angesprochen und erhält
einen hellen Hintergrund (background-color:#F0F4D6;) sowie einen
Rahmen.
Damit der hinter dem Menü liegende Schatten sichtbar wird, wird
das Menü mittels position:relative um
1em nach oben und 1em nach links verschoben. Damit genug Platz für diese
Verschiebung bleibt, wird dem Schatten ausreichend Abstand (margin-left:2em;
margin-top:2em;) zugewiesen.
Browser
Der Netscape 4 hat mit solchen Dingen arge Probleme. Wenn dich das nicht stört, kannst du diesen Trick bedenkenlos einsetzen.