html - 使具有两层的导航栏和下拉菜单在第二层水平移动

Question

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

到目前为止，这是我的栏，我大体上知道如何制作下拉栏，但我认为从这一点开始你向我解释会更容易，而不是告诉我要删除什么。

http://jsfiddle.net/7yrX7/119/

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

}

Answer 1

我基于您作为“答案”发布的更新代码进行此修复(将来，您可以使用编辑功能来更新您的问题)。

让持久栏显示在主导航下方的诀窍是在末尾添加一些 div(我们称之为 ribbon_filler)并使其始终可见。当下拉菜单出现时，它就出现在色带填充物上方。以下是填充程序的 CSS 示例:

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

您可以在您的代码中看到它的使用 here .