如何创建一个弹出多列菜单？

我已经为我的网站提供了一个水平菜单，而且我只想要多列菜单中的部分。这里是我想要做的一个例子：http://www.cssplay.co.uk/menus/pro-flyout-list.html 如何创建一个弹出多列菜单？

是否有一个网站有一个教程，如何做到这一点，或某种发电机？我希望我的当前菜单保持完好（http://veterinarycare.atspace.cc/）。我只是想能够悬停和飞出多列部分。看起来与我见过的人一样，我必须实现他们的水平/垂直条，并且它使得如何分离零件以使其与我的工作混淆。

来源

2012-01-07 punchxcore

我不知道在哪里可以找到教程，但这里有一个（非常）一般的指南。

首先，你要安排您的导航栏和弹出一系列的嵌套列表，排序是这样的：

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

来源

2012-01-07 04:44:54 Michael0x2a

如何创建一个弹出多列菜单？

回答

相关问题