制作一个两层导航栏和下拉在二层水平走向

所以，基本上，我有一个导航栏。我想要下面的第二个“导航栏”，它总是可见的，但没有用户交互，它什么也不显示。但是，当您将鼠标悬停在主栏中的选项卡上时，下拉栏会从给定位置开始，然后沿着第二层进行水平移动。制作一个两层导航栏和下拉在二层水平走向

这是我的酒吧到目前为止，我通常知道如何做一个下拉栏，但我想你会更容易从这一点向我解释，而不是告诉我什么要删除。

<div id="nav"> 
<div id="container"> 
    <ul>   
    <li><img src="bilder/menu.jpg" style="height:120%; padding-left: 100px"> </li> 
    <li><a href="#"> Left thing </a></li> 
    <li> 
    <a href="#"> Right thing </a></li> 
    </ul> 
    <a href="http://www.facebook.com"><img src="bilder/facebook.ico" style=" height:100%; float:right; padding-right:50px;"> </a> 
    <a href="http://www.facebook.com"><img src="bilder/twitter.ico" style=" height:100%; float:right; padding-right: 15px;"></a> 
</div> 
</div> 

<div id="ribbon"> 
</div> 





body, 
#nav ul { 
    padding: 0; 
    margin: 0; 
} 
body { 
    font-family: Arial; 
    font-size: 17px; 
} 

#nav { 
    background: linear-gradient(#999C92,#72776A); 
    width: 100%; 
    position:fixed; 
    height:50px; 

} 
#nav ul { 
    list-style-type: none; 
    font-size:0; /*hack for inline-block removes side margins*/ 
} 

#nav ul a{ 
list-style-type: none; 
text-decoration: none; 
} 

#nav > ul { text-align:center; } 

#nav li { 

    font-size: 17px; 
    vertical-align: middle; 
    float: left; 
} 

#nav li a{ 
padding: 15px; 
display: block; 
    display:inline-block; 
} 

#nav ul li a:hover { 
    background-color: #333; 
    color:red; 
} 

#nav a:visited { 
    color: white; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav li:hover ul { 
    display: block; 
    float:left; 
} 
#nav ul ul { 
    display: none; 
    color: red; 
    border: 1px solid black; 
} 

#nav a li a:hover { 
    color: #699; 
} 



#ribbon { 
width: 100%; 
height: 20px; 
background-color: black; 

}

来源

2014-09-02 Håvard Pedersen

我只是给了一个答案，一个非常类似的问题在[这里]（http://stackoverflow.com/questions/25623012/css-jquery-horizontal-menu-with-2-line/25623737 ）。它只需要一点点调整就能让它为你工作。 – 2014-09-02 17:29:28

我有下拉酒吧，我让他们去水平和正确的大小等等。问题是，我想下拉酒吧显示在一个已经可见的第二个酒吧，铺设在已有的导航栏下面。我还希望每个下拉菜单都从一个特定的位置开始，这样，如果我有多个下拉选项卡，它们都以相同的方式开始，例如最左侧。 – 2014-09-02 18:28:25

我设法让标签显示在最左边，就像我想要的那样。所以，唯一的问题就是让背景条始终可见。此外，现在背景栏连接到标签，而不是反过来，这意味着如果我想让下拉菜单显示一些像素到栏的右侧，栏会跟着..任何解决方案？ – 2014-09-02 18:32:51

我立足此修复程序关闭您发布作为一个“答案”更新的代码（在将来，您可以通过使用编辑功能，而不必更新您的问题）。

在主导航栏下方显示持久栏的技巧只是在最后添加一些div（我们称之为ribbon_filler）并使其始终可见。当下拉菜单出现时，它出现在带状填充物上方。下面是为填充物的CSS可能看起来像一个例子：

#ribbon_filler { 
    top:50px; 
    height:50px; 
    width:100%; 
    background-color: #ACD661; 
    border:1px solid black; 
}

你可以看到在你的代码here此使用。

来源

2014-09-02 18:54:43

我会去了解一下快鱼的实现是一个伟大的jQuery的菜单，并为您提供了比你更可能在自己的发展。

http://users.tpg.com.au/j_birch/plugins/superfish/examples/#

来源

2014-09-02 19:00:18 Alan

制作一个两层导航栏和下拉在二层水平走向

回答

相关问题