CSS only menu popout?

Question

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

Answer 1

Yes.

HTML

<ul><li><a href="Homepage">Logo</a>
    <ul id="map"><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>

CSS

#map li a {
    display: none;
}

#map li:hover a {
    display: block;
}

Note that IE6 won't fire the :hover pseudo class on anything but links (you might want to change your markup).

Also simply use absolute positioning to position the popups.

See the general idea here.