悬停下拉菜单

Question

我希望在我正在帮助维护的网站中创建悬停菜单。这是导航条码。我希望让“与我们一起工作”有几个下拉菜单选项。有什么建议么？我试过遵循这个，但没有运气。 https://www.w3schools.com/howto/howto_js_dropdown.asp

  <div id="navtoggle">
    <div class="row justify-content-between align-items-center navlinkdiv">
        <div>
                <a href="/uwchips" class="svgbtn" title="Go to main home page"><img class="svgicon" src="/uwchips/img/home.svg" alt="home icon" /></a>
            </div>
        <div>
            <a href="#thenavbar" class="svgbtn navbar-toggler" data-toggle="collapse" title="expand and collapse menu"><img class="svgicon" src="/uwchips/img/hamburger.svg" alt="expand menu icon" /></a>
            </div>
    </div>
</div>

<div id="thenavbar" class="collapse">
    <h2 class="offscreen">Site Navigation</h2>
    <div id="topnavlist" class="navbar-nav align-content-between align-items-center">
        <div class="nav-item"><a class="nav-link" href="/uwchips/">Home</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/about-us">About Us</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/people">People</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/projects">Projects</a></div>
        <div class="nav-item"><a class="nav-link" href="/uwchips/work-with-us">Work With Us</a>
        <div class="nav-item"><a class="nav-link" href="/uwchips/products">Products</a></div>
    </div>
</div>

Answer 1

这很容易用一些简单的 CSS 代码来完成。不过，我已经对您的 html 进行了一些编辑，因为除非两个元素处于同一级别，否则这不起作用，但它的要点是：您有悬停元素：

<a href="#thenavbar" class="navbar-toggler" data-toggle="collapse" 
title="expand and collapse menu"><img class="svgicon" 
src="http://www.iconarchive.com/download/i86425/martin-berube/flat-
animal/duck.ico" alt="expand menu icon" width="50px"/></a>

然后你就有了实际导航栏的 div：

<div id="thenavbar" class="collapse">
<h2 class="offscreen">Site Navigation</h2>
<div id="topnavlist" class="navbar-nav align-content-between align-items-center">
    <div class="nav-item"><a class="nav-link" href="#example">Home</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">About Us</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">People</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">Projects</a></div>
    <div class="nav-item"><a class="nav-link" href="#example">Work With Us</a>
    <div class="nav-item"><a class="nav-link" href="#example">Products</a></div>
</div>

现在你有了它，你添加你的 CSS 代码：

#thenavbar {
  visibility:hidden;
  position:absolute;
  top:30px;
}

.navbar-toggler:hover ~ #thenavbar {
  visibility:visible;
}

成品在下方，将鼠标悬停在鸭子上会显示您的导航栏：

#thenavbar {
  visibility:hidden;
  position:absolute;
  top:30px;
}

 .navbar-toggler:hover ~ #thenavbar {
  visibility:visible;
  
}

#thenavbar:hover {
  visibility:visible;
}

<a href="#thenavbar" class="navbar-toggler" data-toggle="collapse" title="expand and collapse menu"><img class="svgicon" src="http://www.iconarchive.com/download/i86425/martin-berube/flat-animal/duck.ico" alt="expand menu icon" width="50px"/></a>

<div id="thenavbar" class="collapse">
    <h2 class="offscreen">Site Navigation</h2>
    <div id="topnavlist" class="navbar-nav align-content-between align-items-center">
        <div class="nav-item"><a class="nav-link" href="#example">Home</a></div>
        <div class="nav-item"><a class="nav-link" href="#example">About Us</a></div>
        <div class="nav-item"><a class="nav-link" href="#example">People</a></div>
        <div class="nav-item"><a class="nav-link" href="#example">Projects</a></div>
        <div class="nav-item"><a class="nav-link" href="#example">Work With Us</a>
        <div class="nav-item"><a class="nav-link" href="#example">Products</a></div>
    </div>
</div>