ICH BIETE: CSS Design BlueGrey mit Coolmenü

<div id="Header"></div></div>
<div id="Design"></div></div>

</div></div>

<style type="text/css" media="screen">
<!--

body
{
font-family: Arial, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}


li a
{
padding-right: 0px;padding-top: 7px;
}


div.menu
{
position: absolute;
z-index: 5;
top: 177px;
left: 52%;
margin-left:-405px;
width:905px;
}


.menu li
{
width: 186px;
float: left;
}


.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://img360.imageshack.us/img360/4302/buttonxf6.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
color: #000000;
margin: 0px;
display: block;
height: 29px;
}


.menu a:hover
{
background-image: url(http://img237.imageshack.us/img237/235/buttonhoverym8.png);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 12px;
display: none;
width: 160px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000;
}
//-->

</style>

<!-- Anfang des Scriptes -->

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<!-- Ende des Scriptes -->

<div class="menu">

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menü1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li><a href="http://LINK">Unterpunkt</a></li>


</ul>
</li>


<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menü2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://LINK">Unterpunkt</a></li>



</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menü3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://LINK">Unterpunkt</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menü4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://LINK">Unterpunkt</a></li>

</ul>
</li>

</div>

h1#title{display: none;}
#sidebar_container{display: none;}
#nav_container{display: none;}
body {background:#9a9ea2;}
div.header{display:none;}
li.nav_element{list-style-type: none;}
a{color#FFFFFF; font-size: 12px; text-decoration: none;}
a:hover {color: #000000; font-size: 12px; text-decoration: none;}
a:link {color: #FFFFFF; font-size: 12px; text-decoration: none;}
a:active {color: #000000; font-size: 12px; text-decoration: none;}
a:visited {color: #000000; font-size: 12px; text-decoration: none;}
#Design {
width: 1000px;
height: 598px;
background:;
background-image:url(http://img353.imageshack.us/img353/3731/contenthm0.png);
color: ;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;overflow:auto;
z-index: 2;
position:absolute;left:125px;top:174px;}
#content {
height: 530px;
width: 980px;
z-index:1;
background:;
background-image:url();
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:150px;top:218px;}
h2#title span {display:none}
#counter{
position:absolute;
left: 140px;
top: 760px;
z-index: 10;
color: #FFFFFF;
}
#Header {
width: 995px;
height: 94px;
background:;
background-image:url(http://img368.imageshack.us/img368/2186/headercu3.png);
color: ;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;overflow:auto;
z-index: 10;
position:absolute;left:126px;top:60px;}