Как создать всплывающее меню с несколькими столбцами?

Question

У меня уже есть горизонтальное меню для моего сайта, и я хочу, чтобы вылетела часть многоколоночного меню. Вот пример того, что я хочу сделать: http://www.cssplay.co.uk/menus/pro-flyout-list.html

Есть ли сайт, на котором есть учебник о том, как это сделать, или какой-то генератор? Я хочу, чтобы мое текущее меню оставалось в такте (http://veterinarycare.atspace.cc/). Я просто хочу иметь возможность парить и иметь многоколоночную часть. Похоже, с теми, что я видел, я должен реализовать их горизонтальную / вертикальную полосу, и это сбивает с толку то, как разделить части, чтобы они работали с моей.

Answer 1

Я не знаю, где найти учебник, но вот (очень) общее руководство.

Во-первых, вы хотите расположить панель навигации и всплывающую подсказку в виде последовательности вложенных списков, например, так:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Link</a>
        <ul class="flyout">
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
</ul>

Затем, в своем CSS, вы убедитесь, что вы стилизуете всплывающее окно следующим образом:

.flyout{
    display:none;
    visibility:hidden;
}

Затем, когда вы наводите курсор на родительский элемент li, вы убедитесь, что всплывающее окно появляется.

li:hover .flyout{
    display:block;
    visibility:visible;
    /* snip */
}

Тогда нужно просто правильно расположить все, добавить стили и, как правило, сделать навигационную панель необычной.

Я бы попытался относительно позиционировать всплывающую подсказку и нажать ее вниз, используя top:16px или что-то в этом роде. Вы также можете попытаться изменить положение родительского элемента li или изменить способ обработки переполнений в CSS, чтобы он не выходил из-под контроля.

Вот демоверсия: http://jsfiddle.net/Deflect/KXHn8/