css - 如何创建弹出式多列菜单？

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/