Всплывающее меню только CSS?

Question

Я хотел бы иметь логотип (скажем, это квадрат для простоты) с 4 ссылками, которые всплывают, когда его накладывают. Они будут расположены выше, ниже и по бокам меню / логотипа.

Это достижимо только с помощью CSS? Любые предложения о том, как можно это сделать?

Семантически я хотел бы заказать их на странице что-то вроде:

<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>

Но пусть они появятся на странице как:

             North
       West  Logo   East
             South

Answer 1

Да.

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;
}

Обратите внимание, что IE6 не будет запускать :hover псевдокласс на чем угодно, кроме ссылок (вы можете изменить разметку).

Также просто используйте абсолютное позиционирование для размещения всплывающих окон.

Смотрите общую идею здесь.