Tutorial: Coolmenü ohne Javascript!

/* Coolmenü positionieren */

.coolmenu {
position:absolute;
left:10px;
top:20px;
}

/* Allgemeine Einstellungen */

.menu {
color:#000000;
cursor:pointer;
float:left;
height:40px;
width:180px;
overflow-x:hidden;
overflow-y:hidden;
}

.menu:hover {
height:auto;
width:auto;
overflow-x:visible;
overflow-y:visible;
}

/* Hauptmenü anpassen*/

.menu_head {
font-size:17px;
padding-bottom:20px;
text-align:left;
height: 28px;
font-family: Arial;
background-color: #CCCCCC;
background: url();
padding: 10px;
}

/* Anpassungen des Hovers von den Hauptmenüs */

.menu_head:hover {
background-color: #D3D3D3;
background: url();
}

/* Anpassungen des Menüs */

.menu_box {
background-attachment:scroll;
background:#EBEBEB repeat;
background-position:0 0;
border-bottom: 1px solid #cccccc;
border-right: 1px;
overflow-x:visible;
overflow-y:visible;
padding: 5px;
width:170px;
margin-top: -9px;
}

/* Untermenüs anpassen */

.menu_box .menu_link {
color:#333333;
display:block;
font-size:14px !important;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding: 3px;
padding-left:10px;
text-decoration:none;
}

/* Anpassungen des Hovers von den Untermenüs */

.menu_box .menu_link:hover {
color:#000000;
background-color: #DDDDDD;
background: url();
}

/* Falls ihr keine runden Ecken links und rechts - oben haben wollt, müsst ihr den nachfolgenden Code entfernen. */

/* Die Ecke vom Coolmenü links rund machen*/

#first {
-moz-border-radius-topleft: 7px;
border-radius: 7px 0px 0px 0px;
}

/* Die Ecke vom Coolmenü rechts rund machen*/

#last {
-moz-border-radius-topright: 7px;
border-radius: 0px 7px 0px 0px;
}

.coolmenu {
position:absolute;
left: 50%;
margin-left: -360px;
top:20px;
}

<div class="coolmenu">

<div class="menu">

<div id="first" class="menu_head">Hauptmenü 1</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 1.1">Untermenü 1.1</a>
<a class="menu_link" href="Unterlink 1.2">Untermenü 1.2</a>
<a class="menu_link" href="Unterlink 1.3">Untermenü 1.3</a>
<a class="menu_link" href="Unterlink 1.4">Untermenü 1.4</a>
</div>

</div>


<div class="menu">

<div class="menu_head">Hauptmenü 2</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 2.1">Untermenü 2.1</a>
<a class="menu_link" href="Unterlink 2.2">Untermenü 2.2</a>
<a class="menu_link" href="Unterlink 2.3">Untermenü 2.3</a>
</div>

</div>


<div class="menu">

<div class="menu_head">Hauptmenü 3</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 3.1">Untermenü 3.1</a>
<a class="menu_link" href="Unterlink 3.2">Untermenü 3.2</a>
</div>

</div>


<div class="menu">

<div id="last" class="menu_head">Hauptmenü 4</div>
<div class="menu_box">
<a class="menu_link" href="Unterlink 4.1">Untermenü 4.1</a>
<a class="menu_link" href="Unterlink 4.2">Untermenü 4.2</a>
<a class="menu_link" href="Unterlink 4.3">Untermenü 4.3</a>
<a class="menu_link" href="Unterlink 4.4">Untermenü 4.4</a>
<a class="menu_link" href="Unterlink 4.5">Untermenü 4.5</a>
</div>

</div>

</div>

<a class="menu_link" href="Unterlink">Untermenü</a>