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

body { 
	text-align:center;  
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0; 
	padding:0; 
}

#page { 
	text-align:left;   
	padding:0em; 
}


/* ~~~ Navigation ~~~ */

#navi, #navi ul { 
	list-style-type:none; 
	margin:0; 
	padding:0; 
} /* Style-Reset */

#navi li { 
	width:205px; /* Button-Breite */ 
	float:left; 
} /* Horizontale Anordnung */
		
#navi li ul { 
	display:none; 
} /* Normalzustand eingeklappt */

#navi li:hover ul { 
	display:block; 
} /* Ausgeklappt */
		

/* ~~~ Styles ~~~ */
	  
#navcontainer { 
	height:50px; /* Hoehe Button-Container */
	position:relative;
	order-right:1px solid black;
	width: 86.8%;
	background:#F2C13A; 
}
	  
#navi { 
	position:absolute; 
}
	  
#navi li { 
	border-left:1px solid #000; 
	border-top:1px solid #000; 
	margin:0;		 
}

#navi ul li { 
	border:none; 
	margin:0; /* Abstand Listenelemente */ 
	width:160px; /* Breite Listenelemente */
}
		
#navi a { 
	font-weight:bold; 
	text-align:center; 
	display:block; 
	padding:0.4em; 
}

#navi a:link, #navi a:visited { 
	color:#000; 
	background:#FFF; 
	text-decoration: none; 
}

#navi a:active, #navi a:hover { 
	color:#000; 
	background:#F2C13A; 
	text-decoration:none; 
}

</style>

<div id="page">
  <div id="navcontainer">
    <ul id="navi">
      <li><a href="##">Element 1</a>
	<ul>
	  <li><a href="#" >Link</a></li>
	  <li><a href="#"i>Link</a></li>
         <li><a href="#"i>Link</a></li>
	</ul>
      </li>
      <li><a href="##">Element 2</a>
        <ul>
	  <li><a href="##">Link</a></li>
	  <li><a href="##">Link</a></li>
         <li><a href="##">Link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>