<style type="text/css">
.xbox h1, .zbox h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xbox p, .zbox p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xbox {
background: transparent;
width:240px;
float:left;
margin:0 3px;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}
.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}
.farbe {
color:#fff;
background-color: #9CF;
}
</style>

<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">Dies ist der Titel</h1>
<p>Das ist die erste Zeile in dieser Box.</p>
<p>Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. Und es geht mit Text einfach so weiter. </p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

<style type="text/css">
.menu {
font-family: arial, sans-serif;
position:relative;
font-size:11px;
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;
line-height:20px;
font-size:11px;
overflow:hidden;
background-color: #9CF;
}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; 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 {color:#fff; background-color: #FC0;}
.menu ul li:hover ul li:hover a.hide {color:#000; background-color: #F90;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; color:#000; background-color: #CCC;}
.menu ul li:hover ul li a:hover {color:#000; background-color: #C90;}
.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;}
</style>

<div class="menu">
<ul><li><a class="hide" href="#">START</a>
<ul>
<li><a href="#" title="Start 1">Start 1</a></li>
<li><a href="#" title="Start 2">Start 2</a></li>
<li><a class="hide" href="#" title="Mehr Start 3">Mehr Start 3</a>
<ul>
<li><a href="#" title="Start 3-1">Start 3-1</a></li>
<li><a href="#" title="Start 3-2">Start 3-2</a></li>
<li><a href="#" title="Start 3-3">Start 3-3</a></li>
</ul>
</li>
<li><a href="#" title="Start 4">Start 4</a></li>
<li><a href="#" title="Start 5">Start 5</a></li>
</ul>
</li>
<li><a class="hide" href="#">MENU</a>
<ul>
<li><a href="#" title="MENU 1">MENU 1</a></li>
<li><a href="#" title="MENU 2">MENU 2</a></li>
<li><a href="#" title="MENU 3">MENU 3</a></li>
</ul>
</li>
<li><a class="hide" href="#">MENU</a>
<ul>
<li><a href="#" title="MENU 1">MENU 1</a></li>
<li><a href="#" title="MENU 2">MENU 2</a></li>
<li><a href="#" title="MENU 3">MENU 3</a></li>
</ul>
</li>
<li><a class="hide" href="#">MENU</a>
<ul>
<li><a href="#" title="MENU 1">MENU 1</a></li>
<li><a href="#" title="MENU 2">MENU 2</a></li>
<li><a href="#" title="MENU 3">MENU 3</a></li>
</ul>
</li>
<li><a class="hide" href="#">MENU</a>
<ul>
<li><a href="#" title="MENU 1">MENU 1</a></li>
<li><a href="#" title="MENU 2">MENU 2</a></li>
<li><a href="#" title="MENU 3">MENU 3</a></li>
</ul>
</li>
</ul>

<style type="text/css">
#dlmenu {height:10em; margin-top: 20px; margin-right: 0; margin-bottom: 300px; margin-left: 10px;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; z-index:100; background-color: #FFF;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {color:#000; background-color: #9CF; background-image: url(top_grad_2.gif); background-position: center center;}
#menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {height:12em; background-color: #CCF;}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;} #menu dl {width: 15em; margin: 0; cursor:pointer; background-color: #99F;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;} #menu dd {margin:0; padding:0; font-size: 1em; text-align:left; } .gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background-color: #99F; background-image: url(top_grad.gif); background-position: center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background-color: #CCC; background-image: url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;} .gallery dd a:hover {color:#69F; background-color: #F96;}
</style>

<div id="dlmenu">
<ul id="menu">
<li><dl class="gallery">
<dt><a href="#">START</a></dt>
<dd><a href="#" title="Start 1">Start 1</a></dd>
<dd><a href="#" title="Start 2">Start 2</a></dd>
<dd><a href="#" title="Start 3">Start 3</a></dd>
<dd><a href="#" title="Start 4">Start 4</a></dd>
</dl></li>
<li><dl class="gallery">
<dt><a href="#">MENU</a></dt>
<dd><a href="#" title="menu 1">menu 1</a></dd>
<dd><a href="#" title="menu 2">menu 2</a></dd>
<dd><a href="#" title="menu 3">menu 3</a></dd>
</dl></li>
<li><dl class="gallery">
<dt><a href="#">MENU</a></dt>
<dd><a href="#" title="menu 1">menu 1</a></dd>
<dd><a href="#" title="menu 2">menu 2</a></dd>
<dd><a href="#" title="menu 3">menu 3</a></dd>
<dd><a href="#" title="menu 4">menu 4</a></dd>
<dd><a href="#" title="menu 5">menu 5</a></dd>
</dl></li>
</ul></div></div>

body {font-family: serif; background-color: #fff; color: #000; padding: 0; margin: 0;}
P {margin: 0.7em 1em;}
DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {padding: 1px; border-radius: 10px; -moz-border-radius: 10px;}
DIV.shadow {background-color: #8e8e8e; border: 1px solid #959595; margin: 0px;}
DIV.shadow2 {background-color: #aaa; border: 1px solid #bebebe; margin: 0;}
DIV.shadow3 {background-color: #d1d1d1; border: 1px solid #e1e1e1; margin: 0;}
DIV.shadow4 {background-color: #ededed; border: 1px solid #f6f6f6; margin: 0;}
DIV.shadow5 {float: left; background-color: #fcfcfc; border: 1px solid #fff; margin: 0.7em 1em;}

<div class="shadow5">
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow">
</div></div></div></div></div>