Question

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

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

<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

我基于你发布的更新代码来解决这个问题＆＃34;答案＆＃34; （将来，您可以使用编辑功能更新您的问题。）

在主导航下方显示持久栏的技巧只是在末尾添加一些div（让我们称之为ribbon_filler）并使其始终可见。当下拉列表出现时，它只会出现在色带填充物上方。以下是填充物的CSS可能的示例：

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

您可以在代码here中看到这一点。

Answer 2

我会研究一下Superfish的实现，它是一个很棒的jQuery菜单，给你的东西比你自己开发的更多。

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

制作具有两层和下拉列表的导航栏在第二层处于水平位置

2 个答案: