Menüs sind nicht einfach zu verstehen und auch schwierig zu erklären.
Daher hier der Code:
HTML-Code:
<head>
<meta charset="utf-8">
<title>Tasty Testseite
</title>
<style>
#menu {margin-left:50%;}
#menu ul {margin:0; margin-left:-50%; }
#menu > ul > li {width:130px; float:left; background-color:green; list-style:none; margin:0; padding:0;height: 1.2em;}
#menu ul li:after {clear:both;}
#menu > ul > li:first-child {background-color:red;}
#menu ul ul {position:relative; background-color:yellow; display:inline-block; left:-1500%; padding:2px 5px 5px 0;}
#menu ul ul li {display:block; background-color:yellow;}
#menu > ul > li:hover ul, #menu ul ul:hover {left:50%; Z-index:10;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">TAB a</a>
<ul>
<li><a href="#">aaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
</ul>
</li>
<li>
<a href="#1">Tab b</a>
<ul>
<li><a href="#1">bbbbbbbb</a></li>
<li><a href="#1">bbbbbbbbbbbbbbbbbbb</a></li>
<li><a href="#1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
getestet in Firefox, Chrome und IE8.