Блог

Поэтому я использую панель навигации, встроенную в Bootstrap 5, где при наведении на нее открываются элементы подменю, это отлично работает для основных элементов навигации, при поднавигации она перекрывается и прерывается, что означает, что на панели «службы» все недоступно.

Я использовал выпадающий список в поднавигации, поэтому теоретически выпадающий список должен падать вправо, а не вниз, как в настоящее время, есть идеи?

HTML-панель навигации с главным меню и вложенным меню «услуги»/выпадающим списком:

 lt;ul id="menu-primary" class="navbar-nav me-auto mb-2 mb-md-0 navbar-nav"gt;lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown nav-item nav-item-235369"gt;lt;a href="https://yorkshireaccountancy.streamer.click/about-us/" class="nav-link dropdown-toggle show" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;About Uslt;/agt; lt;ul class="dropdown-menu depth_0 show"gt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235370"gt;lt;a href="https://yorkshireaccountancy.streamer.click/careers/" class="dropdown-item "gt;Careerslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235371"gt;lt;a href="https://yorkshireaccountancy.streamer.click/referral-scheme/" class="dropdown-item "gt;Referral Schemelt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235372"gt;lt;a href="https://yorkshireaccountancy.streamer.click/meet-the-team/" class="dropdown-item "gt;Meet The Teamlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235373"gt;lt;a href="https://yorkshireaccountancy.streamer.click/switch-accountants/" class="dropdown-item "gt;Switch Accountantslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235374"gt;lt;a href="https://yorkshireaccountancy.streamer.click/testimonials/" class="dropdown-item "gt;Testimonialslt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235375"gt;lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;Serviceslt;/agt; lt;ul class="dropdown-menu depth_0"gt;  lt;li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235376 dropend dropdown-menu-end"gt;lt;a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;Serviceslt;/agt;  lt;ul class="dropdown-menu sub-menu depth_1"gt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235377"gt;lt;a href="https://yorkshireaccountancy.streamer.click/annual-accounts/" class="dropdown-item "gt;Annual Accountslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235378"gt;lt;a href="https://yorkshireaccountancy.streamer.click/auto-enrolment/" class="dropdown-item "gt;Auto Enrolmentlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235379"gt;lt;a href="https://yorkshireaccountancy.streamer.click/bookkeeping/" class="dropdown-item "gt;Bookkeepinglt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235380"gt;lt;a href="https://yorkshireaccountancy.streamer.click/company-formation/" class="dropdown-item "gt;Company Formationlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235381"gt;lt;a href="https://yorkshireaccountancy.streamer.click/corporation-tax/" class="dropdown-item "gt;Corporation taxlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235382"gt;lt;a href="https://yorkshireaccountancy.streamer.click/management-accounts/" class="dropdown-item "gt;Management Accountslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235383"gt;lt;a href="https://yorkshireaccountancy.streamer.click/payroll/" class="dropdown-item "gt;Payrolllt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235384"gt;lt;a href="https://yorkshireaccountancy.streamer.click/self-assessment/" class="dropdown-item "gt;Self-Assessmentlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235385"gt;lt;a href="https://yorkshireaccountancy.streamer.click/fee-protection-insurance/" class="dropdown-item "gt;Fee Protection Insurancelt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235386"gt;lt;a href="https://yorkshireaccountancy.streamer.click/vat/" class="dropdown-item "gt;VATlt;/agt;lt;/ligt;  lt;/ulgt; lt;/ligt;  lt;li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235387 dropend dropdown-menu-end"gt;lt;a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;Specialismslt;/agt;  lt;ul class="dropdown-menu sub-menu depth_1"gt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235388"gt;lt;a href="https://yorkshireaccountancy.streamer.click/ebay-accountants/" class="dropdown-item "gt;eBay Accountinglt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235389"gt;lt;a href="https://yorkshireaccountancy.streamer.click/pub-accountants/" class="dropdown-item "gt;Pub Accountantslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235390"gt;lt;a href="https://yorkshireaccountancy.streamer.click/capital-allowances-tax-relief/" class="dropdown-item "gt;Capital Allowances Tax Relieflt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235391"gt;lt;a href="https://yorkshireaccountancy.streamer.click/research-and-development-tax-relief/" class="dropdown-item "gt;Research and Development Tax Relieflt;/agt;lt;/ligt;  lt;/ulgt; lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235392"gt;lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;Partnershipslt;/agt; lt;ul class="dropdown-menu depth_0"gt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235393"gt;lt;a href="https://yorkshireaccountancy.streamer.click/pandle-accountant/" class="dropdown-item "gt;Pandle Accountantlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235394"gt;lt;a href="https://yorkshireaccountancy.streamer.click/quickbooks-accountant/" class="dropdown-item "gt;QuickBooks Accountantlt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235395"gt;lt;a href="https://yorkshireaccountancy.streamer.click/receipt-bank/" class="dropdown-item "gt;Receipt Banklt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235396"gt;lt;a href="https://yorkshireaccountancy.streamer.click/sage-accountant/" class="dropdown-item "gt;Sage Accountantslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235397"gt;lt;a href="https://yorkshireaccountancy.streamer.click/satago/" class="dropdown-item "gt;Satagolt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235398"gt;lt;a href="https://yorkshireaccountancy.streamer.click/xero-accountant/" class="dropdown-item "gt;Xero Accountantlt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235399"gt;lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;Who We Helplt;/agt; lt;ul class="dropdown-menu depth_0"gt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235400"gt;lt;a href="https://yorkshireaccountancy.streamer.click/individuals-accountant/" class="dropdown-item "gt;Individualslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235401"gt;lt;a href="https://yorkshireaccountancy.streamer.click/landlords-accountant/" class="dropdown-item "gt;Landlordslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235402"gt;lt;a href="https://yorkshireaccountancy.streamer.click/limited-company-accountants/" class="dropdown-item "gt;Limited Companieslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235403"gt;lt;a href="https://yorkshireaccountancy.streamer.click/limited-liability-partnership-accountant/" class="dropdown-item "gt;Limited Liability Partnershiplt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235404"gt;lt;a href="https://yorkshireaccountancy.streamer.click/sole-traders-accountants/" class="dropdown-item "gt;Sole Traderslt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-235405"gt;lt;a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false"gt;Supportlt;/agt; lt;ul class="dropdown-menu depth_0"gt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235407"gt;lt;a href="https://yorkshireaccountancy.streamer.click/blog/" class="dropdown-item "gt;Bloglt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235408"gt;lt;a href="https://yorkshireaccountancy.streamer.click/free-downloads/" class="dropdown-item "gt;Free Downloadslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235409"gt;lt;a href="https://yorkshireaccountancy.streamer.click/news/" class="dropdown-item "gt;Newslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235410"gt;lt;a href="https://yorkshireaccountancy.streamer.click/factsheets/" class="dropdown-item "gt;Factsheetslt;/agt;lt;/ligt;  lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235411"gt;lt;a href="https://yorkshireaccountancy.streamer.click/resources/" class="dropdown-item "gt;Resourceslt;/agt;lt;/ligt; lt;/ulgt; lt;/ligt; lt;li class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-235917"gt;lt;a href="https://yorkshireaccountancy.streamer.click/contact-us/" class="nav-link "gt;Contact Uslt;/agt;lt;/ligt; lt;/ulgt;  

Код JavaScript, используемый для преобразования щелчка начальной загрузки для открытия поднавигации в при наведении:

 lt;scriptgt;  document.addEventListener("DOMContentLoaded", function(){ // make it as accordion for smaller screens if (window.innerWidth gt; 992) {   document.querySelectorAll(".navbar .nav-item").forEach(function(everyitem){   everyitem.addEventListener('mouseover', function(e){   let el_link = this.querySelector('a[data-bs-toggle]');   if(el_link != null){  let nextEl = el_link.nextElementSibling;  el_link.classList.add('show');  nextEl.classList.add('show');  }   });  everyitem.addEventListener('mouseleave', function(e){  let el_link = this.querySelector('a[data-bs-toggle]');   if(el_link != null){  let nextEl = el_link.nextElementSibling;  el_link.classList.remove('show');  nextEl.classList.remove('show');  }    })  });  } // end if innerWidth });  // DOMContentLoaded end   lt;/scriptgt;  

Any ideas would be much appreciated!`