I'd like to have a logo (say it's square for simplicity) with 4 links that pop up when it is moused over. These would be positioned Above, Below and to the sides of the menu/logo.

Is this achievable with only CSS? Any suggestions for how one might go about doing it?

Semantically I'd like to order them with in the page something like:

<ul><li><a href="Homepage">Logo</a>
    <ul><li class="north"><a href="north">North</a></li>
        <li class="west"><a href="west">West</a></li>
        <li class="east"><a href="east">East</a></li>
        <li class="south"><a href="south">South</a></li>
     </ul>
    </li>
</ul>

But have them show up on the page like:

             North
       West  Logo   East
             South