Rund sollst du sein ! ho ho ho..

[neuroleptika]

....
Interessant ist dann wohl nur die umsetzung, denn das dropdownmenu muss ich in verschiedene richtungen öffnen...

Erst mal die Verschachtelte Liste:

<ul id="men">
<li id="li1"><a href="#">Rund<span></span></a>
  <ul>
  <li><a href="#">untermen1</a></li>
  <li><a href="#">untermen1</a></li>
  <li><a href="#">untermen1</a></li>
  </ul>
</li>
....

Die Ausklapprichtung ist egal weil hier alles in px, absolute positioniert wird.
Schwieriger ist die Anordnung der Ebenen (z-index).
Die Listeneinträge verdecken das jeweils vorher notierte Untermenü.
Ich habe es bei :hover mit z-index:1; nach vorne geschoben.

Beispiel mit Untermenü für #li1 und #li2:
Rund soll es sein
Den Text habe ich einfach nur ins <a>-tag geschrieben. Den müßtest du mit einem <span>, <b> oder ähnlichem übermalen. <a> bräuchte dann feste Werte für height und width.

#men #li1 ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;

top: -1000px;
left: -1000px;
height: 100px;
width: 100px;
border: 1px solid black;
padding-top: 20px;
}

/*z-index für li IE7*/
* +html #men #li1:hover  {
z-index: 1;
display: block;
}

#men #li1:hover ul {
top: 44px;
left: 80px;
z-index: 1;
display: block;
}

#men #li1 ul li {
position: static;
display: block;
background-color: #3A3A3A;
color: #EAF4F5;
position: static;
zoom:1; /*layout IE*/
}

#men #li1 ul li a {
display: block;
background-color: #3A3A3A;
color: #EAF4F5;
border-bottom: 1px solid #ffffff;
text-decoration: none;
}

#men #li1 ul li a:hover {
background-color: #EAF4F5;
color: #3A3A3A;
}

Dann müßte der IE6 noch li:hover verstehen.
Vielleicht mit diesem genialen behavior:
http://www.xs4all.nl/~peterned/csshover.html

Alle IE6-7-Hacks solltest du in einem conditional-Comment vor anderen Browsern verstecken. Auch vor dem IE8.
Der IE8 kennt kein haslayout mehr.