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/

如何创建弹出多列菜单？

1 个答案: