Question

我在YouTube上查找制作精良的下拉导航栏，最后找到了一个体面的专业导航栏。它有Focus命令，当你点击它时，它会打开下拉菜单。我决定使用悬停而不是焦点会更专业，但是当我将鼠标悬停在链接上时会出现问题，它会打开菜单，但是当我向下滚动以点击下拉菜单中的某些内容时，下拉菜单会消失到期事实上，我不再在主链接上空盘旋。我尝试在线查找解决方案，但没有找到。我必须非常强调我尝试使用CSS而不是JavaScript的事实。任何帮助将不胜感激。

  .nav-main{ 
   width:100%;
    background-color:#222;
    height:70px;
    color:#fff;
    }
    .nav-main .logo{
    float:left;
    height:40px;
    padding:15px 30px;
    font-size:1.4em;
    line-height:40px;
   }
   .nav-main > ul{
    margin:0;
    padding:0;
    float:left;
    list-style-type:none;
    }
    .nav-main > ul > li{
    float:left;
    }
    .nav-item{
    display:inline-block;
    padding:15px 20px;
    height:40px;
    line-height:40px;
    color:#fff;
    text-decoration:none;
    }

   .nav-content{
    position:absolute;
    top:70px;
    overflow:hidden; 
    background-color:#222;
    max-height:0;
    }
    .nav-content a{
    color:#fff;
    text-decoration:none;
    }
    .nav-content a:hover{
    text-decoration:underline;
    }
    .nav-sub{
    padding:20px;
    }
    .nav-sub ul{
    padding:0;
    margin:0;
    list-style-type:none;
    }
    .nav-sub ul li a{
    display:inline-block;
    padding:5px 0;
    }
    .nav-item:hover{
    background-color:#222;
    }
    .nav-item:hover ~ .nav-content{
    max-height:400px;
   -webkit-transition:max-height 400ms ease-in;
   -moz-transition:max-height 400ms ease-in;
    transition:max-height 400ms ease-in;

    }

Html

<body>
<nav class="nav-main">
<div class="logo">Thomas</div>
<ul>
<li>
<a href="#" class="nav-item">Porfolio</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
<li><a href="#">Site 3</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav-item">CSS</a>

<div class="nav-content">
<div class="nav-sub">
Some Text
</div>
</div>

</li>
<li>
<a href="#" class="nav-item">CodeCourse</a>
</li>

</ul>
<nav>
</body>
</html>

Answer 1

您将：hover附加到HTML中的错误元素。对于每个菜单，您需要将：hover放在包含整个导航的<li>中。只需向该元素添加一个新类，并像这个小提琴一样更改CSS：https://jsfiddle.net/fapfz1ms/

新HTML：

<body>
<nav class="nav-main">
<div class="logo">Thomas</div>
<ul>
<li class="nav-item-container">
<a href="#" class="nav-item">Porfolio</a>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li><a href="#">Site 1</a></li>
<li><a href="#">Site 2</a></li>
<li><a href="#">Site 3</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item-container">
<a href="#" class="nav-item">CSS</a>

<div class="nav-content">
<div class="nav-sub">
Some Text
</div>
</div>

</li>
<li class="nav-item-container">
<a href="#" class="nav-item">CodeCourse</a>
</li>

</ul>
<nav>
</body>
</html>

现在CSS应该是这样的：

 .nav-main{ 
   width:100%;
    background-color:#222;
    height:70px;
    color:#fff;
    }
    .nav-main .logo{
    float:left;
    height:40px;
    padding:15px 30px;
    font-size:1.4em;
    line-height:40px;
   }
   .nav-main > ul{
    margin:0;
    padding:0;
    float:left;
    list-style-type:none;
    }
    .nav-main > ul > li{
    float:left;
    }
    .nav-item{
    display:inline-block;
    padding:15px 20px;
    height:40px;
    line-height:40px;
    color:#fff;
    text-decoration:none;
    }

   .nav-content{
    position:absolute;
    top:70px;
    overflow:hidden; 
    background-color:#222;
    max-height:0;
    }
    .nav-content a{
    color:#fff;
    text-decoration:none;
    }
    .nav-content a:hover{
    text-decoration:underline;
    }
    .nav-sub{
    padding:20px;
    }
    .nav-sub ul{
    padding:0;
    margin:0;
    list-style-type:none;
    }
    .nav-sub ul li a{
    display:inline-block;
    padding:5px 0;
    }
    .nav-item:hover{
    background-color:#222;
    }
.nav-item-container:hover .nav-content {
  max-height:400px;
  -webkit-transition:max-height 400ms ease-in;
  -moz-transition:max-height 400ms ease-in;
  transition:max-height 400ms ease-in;      
    }

保持菜单打开：悬停

1 个答案: