HTML / CSS下拉导航菜单未显示

时间:2016-10-25 05:51:02

标签: javascript jquery html css

我正在尝试创建一个下拉导航,其中包含一个具有visibility:none的div框,但我认为当我在悬停时,我没有使用正确的元素。有帮助吗?我认为问题出在代码的最后一部分。感谢

When hover 'What's New' area, I would like the redbox to dropdown

.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    visibility: hidden;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover .nav-level-2{
    display: block;
}
<nav class="main-nav">
  <div class="inner max-girdle-width">
    <div class="nav-links-container">
      <ul class="nav-links">
        <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
          <div class="nav-level-2">
            <div class="nav-level-2-container row max-girdle-width">
              <div><a href="#">Submenu</a> </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

2 个答案:

答案 0 :(得分:2)

您需要在悬停时添加visibility:visible并在悬停后添加+符号,因为子菜单div位于锚点之外。 li>a:hover .nav-level-2li>a:hover + .nav-level-2+引用悬停元素的下一个元素。

&#13;
&#13;
.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    visibility: hidden;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover + .nav-level-2{
  visibility:visible;
} 
&#13;
<nav class="main-nav">
                        <div class="inner max-girdle-width">
                            <div class="nav-links-container">
                                <ul class="nav-links">
                                    <li class="nav-whats-new">
                                        <a class="nav-level-1" href="#">What's New</a>
                                        <div class="nav-level-2">
                                            <div class="nav-level-2-container row max-girdle-width">
                                                <div><a href="#">Submenu</a>
                                                    
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                    </nav>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

末尾的选择器不正确。您指定的内容会在悬停时选择锚标记内的“nav-level-2”类的所有元素。您需要使用'+'选择器选择紧跟在锚标记之后的div。并使div可见。

为此,请尝试将结尾处的css代码更改为 -

li>a:hover + .nav-level-2{
    visibility: visible;
}

编辑:

要在将鼠标指针移动到菜单中时保持菜单打开,您需要将悬停选择器提供给容器div。

我已经更改了css的最后一位以选择'li'元素和'nav-whats-new'类,我在其上使用了悬停选择器来更改'nav-level-2的可见性'元素 -

li.nav-whats-new:hover .nav-level-2 {
  visibility: visible;
}

这是更新的小提琴 -

https://jsfiddle.net/hbbaq9tf/3/