我無法在導航欄中實現懸停下拉菜單

Question

我使用html，css和bootstrap創建了一個導航欄。 將鼠標懸停在菜單項上時，會出現下拉菜單，但是當我將光標移至下拉菜單時，它就會消失。 我試過了display：塊。 但是，無法執行。 有人可以幫我解決此問題。 這將有極大的幫助。

 .navbar{ position:relative; } .navbar:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 12.5px 0 12.5px; border-color: #fff transparent transparent transparent; left: 55px; top: 99%; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); -webkit-transition: -webkit-transform 337ms ease-in-out; transition: -webkit-transform 337ms ease-in-out; transition: transform 337ms ease-in-out; transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out; } nav .navbar-nav .nav-item .nav-link{ line-height:59px; -webkit-transition: background-color 1s; -moz-transition: background-color 1s; -o-transition: background-color 1s; transition: background-color 1s; } nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{ background-color: #f1c575; } nav ul li:hover > .nav-link { background-color: #f1c575; color: #FFF; } nav .navbar-nav .nav-item .nav-link { position: relative; } nav .navbar-nav .nav-item:hover .nav-link:before { content: ""; display: block; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #7B8B93; position: absolute; left: 35%; bottom: 0px; } /* Navbar Ends */ /* Nav Menu Starts */ .dropdown-content { display: none !important; position: absolute; background-color: #7b8b93; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding-top:20px; padding-bottom:40px; } nav .navbar-nav .nav-item .nav-link:hover + .dropdown-content{ display:block !important; } .dropdown-content li:first-child, .dropdown-content li:last-child{ font-size:18px; } .dropdown-content li a{ text-decoration:none; color:#fff; } /* Nav Menu Ends*/ 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="./index.html">LoGO</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Capabilities</a> <ul class="list-inline dropdown-content"> <li class="list-inline-item list-left-items"> <a href="#">Products</a> <ul class="open-source"> <li><a>Magento</a></li> <li><a>IBM v9 Commerce</a></li> <li><a>Drupal</a></li> </ul> </li> <li class="list-inline-item list-right-items"> <a href="#"> Product Categories</a> <ul class="list-categories"> <li class="one"> <a href="./eCommerce.html" title="E-Commerce"> <img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce"> <span class="service-title">E-Commerce</span> </a> </li> <li class="two"> <a title="Content Management" href="#"> <img class="make-white" src="./images/aoe_icons_webportal.svg" alt="Content Management"> <span class="service-title">Content Management</span> </a> </li> <li class="three"> <a title="Middleware &amp; ESB" href="#"> <img class="make-white" src="./images/Plattform1.svg" alt="Middleware &amp; ESB"> <span class="service-title">Middleware &amp; ESB</span> </a> </li> <li class="one"> <a title="Search &amp; Recommendation" href="#"> <img class="make-white" src="./images/Search2.svg" alt="Search &amp; Recommendation"> <span class="service-title">Search &amp; Recommendation</span> </a> </li> <li class="three"> <a title="Identity &amp; Access Management" href="#"> <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity"> <span class="service-title">PIM Systems</span> </a> </li> <li class="three"> <a title="Identity &amp; Access Management" href="#"> <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity &amp; Access Management"> <span class="service-title">Identity &amp; Access Management</span> </a> </li> <li class="one"> <a title="Development Frameworks" href="#"> <img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks"> <span class="service-title">Development Frameworks</span> </a> </li> <li class="two"> <a title="CRM Systems" href="#"> <img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems"> <span class="service-title">CRM Systems</span> </a> </li> <li class="three"> <a title="Databases &amp; Storage" href="#"> <img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg" alt="Databases &amp; Storage"> <span class="service-title">Databases &amp; Storage</span> </a> </li> <li class="one"> <a title="Mobile Frameworks" href="#"> <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> <span class="service-title">Mobile Frameworks</span> </a> </li> </ul> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Solutions</a> <ul class="list-inline dropdown-content"> <li class="list-inline-item list-left-items"> <a href="#">Solutions</a> <ul class="open-source"> <li class="commerce"><a>Dr.Commerce</a></li> <li class="universal"><a>Universal Commerce</a></li> <li class="emmerging"><a>Emmerging Techlogies</a></li> </ul> </li> <li class="list-inline-item list-right-items"> <a href="#"> Services & Technologies</a> <ul class="list-categories"> <li class="one"> <a href="#" title="E-Commerce"> <img class="make-white" src="./images/Strategy2.svg"> <span class="service-title">Strategy &amp; Consulting</span> </a> </li> <li class="two"> <a title="Content Management" href="#"> <img class="make-white" src="./images/Design1.svg"> <span class="service-title">UX &amp; Design</span> </a> </li> <li class="three"> <a title="Middleware &amp; ESB" href="#"> <img class="make-white" alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg"> <span class="service-title">Software Architecture</span> </a> </li> <li class="one"> <a title="Search &amp; Recommendation" href="#"> <img class="make-white" src="./images/aoe_icons_betrieb.svg"> <span class="service-title">Agile Development</span> </a> </li> <li class="two"> <a title="PIM Systems" href="#"> <img class="make-white" alt="Digital Products" src="./images/Digitization2.svg"> <span class="service-title">Digital Products</span> </a> </li> <li class="three"> <a title="Identity &amp; Access Management" href="#"> <img class="make-white" alt="Payment &amp; Fulfillment" src="./images/aoe_icons_services_payment.svg"> <span class="service-title">Payment &amp; Fulfillment</span> </a> </li> <li class="one"> <a title="Development Frameworks" href="#"> <img class="make-white" alt="Systems Integration" src="./images/Integration1.svg"> <span class="service-title">Systems Integration</span> </a> </li> <li class="two"> <a title="CRM Systems" href="#"> <img class="make-white" alt="DevOps &amp; Operations" src="./images/aoe_icons_Continuous_Deployment.svg"> <span class="service-title">DevOps &amp; Operations</span> </a> </li> <li class="three"> <a title="Databases &amp; Storage" href="#"> <img class="make-white" alt="Customer Care" src="./images/aoe_icons_Customer_Care.svg"> <span class="service-title">Customer Care</span> </a> </li> <li class="one"> <a title="Mobile Frameworks" href="#"> <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> <span class="service-title">Mobile Frameworks</span> </a> </li> <li class="two"> <a title="Portal" href="#"> <img class="make-white" alt="Portals &amp; Applications" src="./images/aoe_icons_web_and_mobile_applications.svg"> <span class="service-title">Portals &amp; Applications</span> </a> </li> <li class="three"> <a title="CMS Solutions" href="#"> <img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg"> <span class="service-title">CMS Solutions</span> </a> </li> <li class="one"> <a title="Middle Ware" href="#"> <img class="make-white" alt="ESB &amp; Middleware" src="./images/Plattform1.svg"> <span class="service-title">ESB &amp; Middleware</span> </a> </li> <li class="two"> <a title="CRM Integration" href="#"> <img class="make-white" alt="CRM Integration" src="./images/aoe_icons_crm_2.svg"> <span class="service-title">CRM Integration</span> </a> </li> <li class="three"> <a title="Identity" href="#"> <img class="make-white" src="./images/aoe_icons_technologies_IRM.svg"> <span class="service-title">Identity &amp; Access Mngmt</span> </a> </li> <li class="one"> <a title="Search" href="#"> <img class="make-white" alt="Search" src="./images/Search2.svg"> <span class="service-title">Search</span> </a> </li> <li class="two"> <a title="E-Commerce" href="#"> <img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg"> <span class="service-title">E-Commerce</span> </a> </li> <li class="three"> <a title="Mobile Apps" href="#"> <img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg"> <span class="service-title">Mobile Apps</span> </a> </li> <li class="one"> <a title="PIM Systems" href="#"> <img class="make-white" alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg"> <span class="service-title">PIM Systems</span> </a> </li> </ul> <p class="text-center mt-5"><a class="btn btn-custom">View All</a></p> </li> </ul> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 

Answer 1

只需更改此CSS，這將使li處於可懸浮狀態，並且如果光標移出錨點.nav-link，則不會處於懸浮狀態

nav .navbar-nav .nav-item:hover .dropdown-content{
  display:block !important; 
}

 .navbar{ position:relative; } .navbar:before { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 12.5px 0 12.5px; border-color: #fff transparent transparent transparent; left: 55px; top: 99%; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); -webkit-transition: -webkit-transform 337ms ease-in-out; transition: -webkit-transform 337ms ease-in-out; transition: transform 337ms ease-in-out; transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out; } nav .navbar-nav .nav-item .nav-link{ line-height:59px; -webkit-transition: background-color 1s; -moz-transition: background-color 1s; -o-transition: background-color 1s; transition: background-color 1s; } nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{ background-color: #f1c575; } nav ul li:hover > .nav-link { background-color: #f1c575; color: #FFF; } nav .navbar-nav .nav-item .nav-link { position: relative; } nav .navbar-nav .nav-item:hover .nav-link:before { content: ""; display: block; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #7B8B93; position: absolute; left: 35%; bottom: 0px; } /* Navbar Ends */ /* Nav Menu Starts */ .dropdown-content { display: none !important; position: absolute; background-color: #7b8b93; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding-top:20px; padding-bottom:40px; } nav .navbar-nav .nav-item:hover .dropdown-content{ display:block !important; } .dropdown-content li:first-child, .dropdown-content li:last-child{ font-size:18px; } .dropdown-content li a{ text-decoration:none; color:#fff; } /* Nav Menu Ends*/ 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="./index.html">LoGO</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Capabilities</a> <ul class="list-inline dropdown-content"> <li class="list-inline-item list-left-items"> <a href="#">Products</a> <ul class="open-source"> <li><a>Magento</a></li> <li><a>IBM v9 Commerce</a></li> <li><a>Drupal</a></li> </ul> </li> <li class="list-inline-item list-right-items"> <a href="#"> Product Categories</a> <ul class="list-categories"> <li class="one"> <a href="./eCommerce.html" title="E-Commerce"> <img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce"> <span class="service-title">E-Commerce</span> </a> </li> <li class="two"> <a title="Content Management" href="#"> <img class="make-white" src="./images/aoe_icons_webportal.svg" alt="Content Management"> <span class="service-title">Content Management</span> </a> </li> <li class="three"> <a title="Middleware &amp; ESB" href="#"> <img class="make-white" src="./images/Plattform1.svg" alt="Middleware &amp; ESB"> <span class="service-title">Middleware &amp; ESB</span> </a> </li> <li class="one"> <a title="Search &amp; Recommendation" href="#"> <img class="make-white" src="./images/Search2.svg" alt="Search &amp; Recommendation"> <span class="service-title">Search &amp; Recommendation</span> </a> </li> <li class="three"> <a title="Identity &amp; Access Management" href="#"> <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity"> <span class="service-title">PIM Systems</span> </a> </li> <li class="three"> <a title="Identity &amp; Access Management" href="#"> <img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity &amp; Access Management"> <span class="service-title">Identity &amp; Access Management</span> </a> </li> <li class="one"> <a title="Development Frameworks" href="#"> <img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks"> <span class="service-title">Development Frameworks</span> </a> </li> <li class="two"> <a title="CRM Systems" href="#"> <img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems"> <span class="service-title">CRM Systems</span> </a> </li> <li class="three"> <a title="Databases &amp; Storage" href="#"> <img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg" alt="Databases &amp; Storage"> <span class="service-title">Databases &amp; Storage</span> </a> </li> <li class="one"> <a title="Mobile Frameworks" href="#"> <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> <span class="service-title">Mobile Frameworks</span> </a> </li> </ul> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Solutions</a> <ul class="list-inline dropdown-content"> <li class="list-inline-item list-left-items"> <a href="#">Solutions</a> <ul class="open-source"> <li class="commerce"><a>Dr.Commerce</a></li> <li class="universal"><a>Universal Commerce</a></li> <li class="emmerging"><a>Emmerging Techlogies</a></li> </ul> </li> <li class="list-inline-item list-right-items"> <a href="#"> Services & Technologies</a> <ul class="list-categories"> <li class="one"> <a href="#" title="E-Commerce"> <img class="make-white" src="./images/Strategy2.svg"> <span class="service-title">Strategy &amp; Consulting</span> </a> </li> <li class="two"> <a title="Content Management" href="#"> <img class="make-white" src="./images/Design1.svg"> <span class="service-title">UX &amp; Design</span> </a> </li> <li class="three"> <a title="Middleware &amp; ESB" href="#"> <img class="make-white" alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg"> <span class="service-title">Software Architecture</span> </a> </li> <li class="one"> <a title="Search &amp; Recommendation" href="#"> <img class="make-white" src="./images/aoe_icons_betrieb.svg"> <span class="service-title">Agile Development</span> </a> </li> <li class="two"> <a title="PIM Systems" href="#"> <img class="make-white" alt="Digital Products" src="./images/Digitization2.svg"> <span class="service-title">Digital Products</span> </a> </li> <li class="three"> <a title="Identity &amp; Access Management" href="#"> <img class="make-white" alt="Payment &amp; Fulfillment" src="./images/aoe_icons_services_payment.svg"> <span class="service-title">Payment &amp; Fulfillment</span> </a> </li> <li class="one"> <a title="Development Frameworks" href="#"> <img class="make-white" alt="Systems Integration" src="./images/Integration1.svg"> <span class="service-title">Systems Integration</span> </a> </li> <li class="two"> <a title="CRM Systems" href="#"> <img class="make-white" alt="DevOps &amp; Operations" src="./images/aoe_icons_Continuous_Deployment.svg"> <span class="service-title">DevOps &amp; Operations</span> </a> </li> <li class="three"> <a title="Databases &amp; Storage" href="#"> <img class="make-white" alt="Customer Care" src="./images/aoe_icons_Customer_Care.svg"> <span class="service-title">Customer Care</span> </a> </li> <li class="one"> <a title="Mobile Frameworks" href="#"> <img class="make-white" src="./images/aoe_icons_mobile-02.svg" alt="Mobile Frameworks"> <span class="service-title">Mobile Frameworks</span> </a> </li> <li class="two"> <a title="Portal" href="#"> <img class="make-white" alt="Portals &amp; Applications" src="./images/aoe_icons_web_and_mobile_applications.svg"> <span class="service-title">Portals &amp; Applications</span> </a> </li> <li class="three"> <a title="CMS Solutions" href="#"> <img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg"> <span class="service-title">CMS Solutions</span> </a> </li> <li class="one"> <a title="Middle Ware" href="#"> <img class="make-white" alt="ESB &amp; Middleware" src="./images/Plattform1.svg"> <span class="service-title">ESB &amp; Middleware</span> </a> </li> <li class="two"> <a title="CRM Integration" href="#"> <img class="make-white" alt="CRM Integration" src="./images/aoe_icons_crm_2.svg"> <span class="service-title">CRM Integration</span> </a> </li> <li class="three"> <a title="Identity" href="#"> <img class="make-white" src="./images/aoe_icons_technologies_IRM.svg"> <span class="service-title">Identity &amp; Access Mngmt</span> </a> </li> <li class="one"> <a title="Search" href="#"> <img class="make-white" alt="Search" src="./images/Search2.svg"> <span class="service-title">Search</span> </a> </li> <li class="two"> <a title="E-Commerce" href="#"> <img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg"> <span class="service-title">E-Commerce</span> </a> </li> <li class="three"> <a title="Mobile Apps" href="#"> <img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg"> <span class="service-title">Mobile Apps</span> </a> </li> <li class="one"> <a title="PIM Systems" href="#"> <img class="make-white" alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg"> <span class="service-title">PIM Systems</span> </a> </li> </ul> <p class="text-center mt-5"><a class="btn btn-custom">View All</a></p> </li> </ul> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>