jquery - 使 superfish 子菜单 100% 的窗口宽度

Question

我正在使用Superfish创建一个大型菜单下拉菜单（包含多列）。

如何将 Superfish 子菜单下拉菜单设置为浏览器的 100% 宽度并在导航栏下方垂直对齐？

我正在使用多列设置。如果子菜单填充浏览器宽度并在导航栏下开始，它看起来更干净。

这是我的导航栏的 HTML（它是一个 Drupal 站点）。

<nav class="navbar">

  <div class="navbar__inner">

    <a class="logo" href="#" title="Home" rel="home">
      <img src="/logo.svg" alt="Home">
    </a>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#CollapsingNavbar" aria-controls="CollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="CollapsingNavbar">

      <div id="block-jb-theme-mainnavigation" class="contextual-region navigation">

        <ul id="superfish-main" class="menu sf-menu sf-main sf-horizontal sf-style-default sf-js-enabled sf-shadow">

          <li id="main-menu-link-contentda177d3d-7e26-442b-b129-6251af26ba2b" class="sf-depth-1 menuparent"><a href="/assortiment" class="sf-depth-1 menuparent sf-with-ul">Assortiment<span class="sf-sub-indicator"> »</span></a><ul class="sf-multicolumn sf-hidden" style="width: 1152px;"><li class="sf-multicolumn-wrapper " style="width: 1152px;"><ol style="width: 1152px;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content6346d5b7-e5c6-4f2c-8e4a-e6066a120166" class="sf-depth-2 sf-no-children"><a href="/assortiment" class="all-items sf-depth-2">Alle items</a></li><li id="main-menu-link-contentbd674a82-02b8-4138-af95-ad8efdd980c9" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="/springkussens" class="sf-depth-2 menuparent">Springkussens</a><ol style="float: none; width: 288px;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-contente4ba2619-a3d5-43d3-a0ce-1ec391515ee7" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/nieuw-assortiment" class="sf-depth-3" style="">Nieuw in assortiment</a></li><li id="main-menu-link-contentdc3a1842-a583-47ee-bc6b-4218b1219f2d" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/klein" class="sf-depth-3" style="">Klein</a></li><li id="main-menu-link-content425fc830-af9e-47d9-8703-98df07198eee" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/standaard" class="sf-depth-3" style="">Standaard</a></li><li id="main-menu-link-content846449b2-911e-4cd5-8991-7ce23bece9e5" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/groot" class="sf-depth-3" style="">Groot</a></li><li id="main-menu-link-content7e3935bb-065b-4df5-8636-07f50f86441e" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/spelen-glijden-klein" class="sf-depth-3" style="">Spelen &amp; Glijden Klein</a></li><li id="main-menu-link-contentfe7f9407-0751-43e9-850e-260eaa432cf1" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/spelen-glijden-standaard" class="sf-depth-3" style="">Spelen &amp; Glijden Standaard</a></li><li id="main-menu-link-content30f82515-e8af-419a-b212-5236fddf37e6" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/spelen-glijden-groot" class="sf-depth-3" style="">Spelen &amp; Glijden Groot</a></li><li id="main-menu-link-content7cbe0c06-2d9b-48ea-8db2-a6a240943b30" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/springkussens-overig" class="sf-depth-3" style="">Overig</a></li><li id="main-menu-link-content140eba0f-b428-4eb3-9d18-4cc22cf35146" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/springkussens-speelbergen" class="sf-depth-3" style="">Speelbergen</a></li><li id="main-menu-link-content9d998082-94dd-4a2a-9981-228db549b6ee" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/shooting-fun" class="sf-depth-3" style="">Shooting Fun</a></li><li id="main-menu-link-contentf6411b5f-2f99-4f84-a6ca-be1d042c8a83" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/disco" class="sf-depth-3" style="">Disco</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-contentf64a224b-dd13-4040-9e01-86ccb4a14b4a" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="/assortiment/attracties" class="sf-depth-2 menuparent">Attracties</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-contenta4d5418a-88ba-46de-8454-e4e66781ead0" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/attracties/stormbanen" class="sf-depth-3" style="">Stormbanen</a></li><li id="main-menu-link-content52267898-958d-49c2-b0aa-70e445541fab" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/attracties/glijbanen" class="sf-depth-3" style="">Glijbanen</a></li><li id="main-menu-link-content0b65b4d5-5c51-493b-873d-b4b4af47b329" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/attracties/sport-en-spel" class="sf-depth-3" style="">Sport &amp; Spel</a></li><li id="main-menu-link-content4dbede53-5895-48a0-86c8-f47bfd4dd175" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/attracties/extreme-jumps" class="sf-depth-3" style="">Extreme Jumps</a></li><li id="main-menu-link-content2fcc76f5-7ea6-4fb6-ba16-80d8d2dad9df" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/attracties/battle-arenas" class="sf-depth-3" style="">Battle arena's</a></li><li id="main-menu-link-contentbc4edff7-c61d-42f7-9c84-ae3cc88c9deb" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/attracties/mechanische-rodeo-sweeper" class="sf-depth-3" style="">Mechanische Rodeo &amp; Sweeper</a></li><li id="main-menu-link-content45bee503-8355-4597-b05d-42a26af3ba88" class="sf-depth-3 menuparent" style=""><a href="/assortiment/tenten" class="menuparent-hidden-column sf-depth-3 menuparent" style="">Tenten</a><ol><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content14495d9b-0922-4566-bb70-09c381699d4b" class="sf-depth-4 sf-no-children"><a href="/assortiment/tenten/luchttenten" class="sf-depth-4">Luchttenten</a></li><li id="main-menu-link-content81bd8843-ded5-4a61-83cf-9132bd844b6b" class="sf-depth-4 sf-no-children"><a href="/assortiment/tenten/spidertenten" class="sf-depth-4">Spidertenten</a></li><li id="main-menu-link-content9536ec4c-33d4-4d4a-96ad-940186ec1f2d" class="sf-depth-4 sf-no-children"><a href="/assortiment/tenten/thema-tenten" class="sf-depth-4">Thema tenten</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-content1dbbfd4d-4153-4b29-ab81-2073805caee0" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="/assortiment/spelen" class="sf-depth-2 menuparent">Spelen</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-contentb6d7ea3d-c76c-4672-b207-cb28c5c1ac99" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/spelen/interactive-games" class="sf-depth-3" style="">Interactive games</a></li><li id="main-menu-link-contentabd33d2a-7c32-49c5-bcc4-36589511383b" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/spelen/voetbal" class="sf-depth-3" style="">Voetbal</a></li><li id="main-menu-link-contentaf46681e-1b30-4dde-97c3-8d0e18dbf8d4" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/spelen/zeskamp" class="sf-depth-3" style="">Zeskamp</a></li><li id="main-menu-link-content46c2d062-94e2-42c2-a3f4-72cc5369641c" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/spelen/sumopakken" class="sf-depth-3" style="">Sumopakken</a></li><li id="main-menu-link-content0dcc6d04-499e-4100-9e66-fa6f6db51c29" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/spelen/winterspelen" class="sf-depth-3" style="">Winterspelen</a></li><li id="main-menu-link-contentfa726815-2c52-4408-a7be-2bd3ec4685b3" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/spelen/overige-attracties" class="sf-depth-3" style="">Overige attracties</a></li><li id="main-menu-link-contentd92200c5-ebcf-4d1d-9ee5-cfd6d60708bb" class="sf-depth-3 menuparent" style=""><a href="" class="menuparent-hidden-column sf-depth-3 menuparent" style="">JB Merken</a><ol><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content3d4f9279-bc87-4bb3-bd01-dd6aedeaf8b7" class="sf-depth-4 sf-no-children"><a href="/assortiment/spelen/interactive-games" class="sf-depth-4">Interactive Playsystems</a></li><li id="main-menu-link-contentc7ef3124-523e-416c-a4f7-4add49fc25ae" class="sf-depth-4 sf-no-children"><a href="/jb-waterspelen" class="sf-depth-4">JB-Waterspelen</a></li><li id="main-menu-link-content7cc3b667-e2fa-40d6-a193-4b0b004bee09" class="sf-depth-4 sf-no-children"><a href="/jb-indoor-opblaaspark" class="sf-depth-4">JB-Indoor opblaaspark</a></li><li id="main-menu-link-contentaba81d0b-7445-4631-9547-0f1507417906" class="sf-depth-4 sf-no-children"><a href="/assortiment/attracties/jb-airmountains" class="sf-depth-4">JB-Airmountains</a></li><li id="main-menu-link-content9f2cf127-dd19-45bb-8e38-ccc32ab132c8" class="sf-depth-4 sf-no-children"><a href="/jb-eurostage" class="sf-depth-4">JB-Eurostage</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-content775e2dab-53d4-480b-94a2-d1d56515dc51" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="/assortiment/blikvangers" class="sf-depth-2 menuparent">Blikvangers</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-contentb561e3de-9c34-4cd1-8fb5-4d03d06c8754" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/blikvangers/geboorte-objecten" class="sf-depth-3" style="">Geboorte objecten</a></li><li id="main-menu-link-contentac7cdd22-278e-45bd-a3f2-21961abed8b3" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/blikvangers/sarah-abraham" class="sf-depth-3" style="">Sarah &amp; Abraham</a></li><li id="main-menu-link-content7cc3a4c4-d8dd-4003-bfff-38d005e5e03e" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/blikvangers/blikvangers-bogen" class="sf-depth-3" style="">Blikvangers &amp; Bogen</a></li><li id="main-menu-link-content3f7a370d-82c4-40ea-9cb2-f7d088838783" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/blikvangers/skydancers-licht-pilaren" class="sf-depth-3" style="">Skydancers &amp; Licht pilaren</a></li><li id="main-menu-link-content72153ee3-2aac-49cb-8894-b878dd55643a" class="sf-depth-3 sf-no-children" style=""><a href="/assortiment/blikvangers/ballonnen-oplaat" class="sf-depth-3" style="">Ballonnen oplaat</a></li><li id="main-menu-link-contente65ec998-24cf-45cf-b0b4-1968d7704386" class="sf-depth-3 menuparent" style=""><a href="/assortiment/accessoires" class="menuparent-hidden-column sf-depth-3 menuparent" style="">Accessoires</a><ol><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content0d232553-ad01-4ab4-872c-64ad2cb33b27" class="sf-depth-4 sf-no-children"><a href="/assortiment/accessoires/blowers" class="sf-depth-4">Blowers</a></li><li id="main-menu-link-contentb4a3d991-73ac-4b60-a10f-3ba77379d0f6" class="sf-depth-4 sf-no-children"><a href="/assortiment/accessoires/overige" class="sf-depth-4">Overige</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></li></ul></li><li id="main-menu-link-content80bfab91-48b8-43be-92d2-dcea92364af6" class="sf-depth-1 menuparent"><a href="/springkussens" class="sf-depth-1 menuparent sf-with-ul">Springkussens<span class="sf-sub-indicator"> »</span></a><ul class="sf-multicolumn sf-hidden" style="width: 1152px;"><li class="sf-multicolumn-wrapper " style="width: 1152px;"><ol style="width: 1152px;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content1767881c-2de9-40e4-b39e-b766f21ab0e0" class="sf-depth-2 sf-no-children"><a href="/springkussens" class="all-items sf-depth-2">Alle items</a></li><li id="main-menu-link-content284b93dd-4a2f-48be-ab66-0771f189fb3b" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="" class="sf-depth-2 menuparent">Springkussens</a><ol style="float: none; width: 288px;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-contentbfe1ecc0-0e8b-4b3d-aa8e-732612812fa2" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/klein" class="sf-depth-3" style="">Klein</a></li><li id="main-menu-link-content6dfa9630-3442-4583-a9c6-7c9fe209d45f" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/standaard" class="sf-depth-3" style="">Standaard</a></li><li id="main-menu-link-contentcb39606d-a842-4f5b-bd11-8d1865ceba5e" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/groot" class="sf-depth-3" style="">Groot</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-content4592bb8d-dc16-49f8-abbf-81cb2e96105e" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="" class="sf-depth-2 menuparent">Spelen &amp; Glijden</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-contentc9e32b16-e740-473b-bca0-91823463e214" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/spelen-glijden-klein" class="sf-depth-3" style="">Spelen &amp; Glijden Klein</a></li><li id="main-menu-link-content6af420f6-4132-47ca-bb19-3555e7225683" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/spelen-glijden-standaard" class="sf-depth-3" style="">Spelen &amp; Glijden Standaard</a></li><li id="main-menu-link-contente180471f-9b57-4cb8-a5ee-dd3193d4fa98" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/spelen-glijden-groot" class="sf-depth-3" style="">Spelen &amp; Glijden Groot</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-content214ef02a-83f2-4075-be62-2cc6171645ff" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="" class="sf-depth-2 menuparent">Overige</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content0a8eee49-b9f9-4313-984d-a24548acb490" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/springkussens-speelbergen" class="sf-depth-3" style="">Speelbergen</a></li><li id="main-menu-link-content6adee857-a1c2-4de1-a4eb-edf99e88a664" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/shooting-fun" class="sf-depth-3" style="">Shooting Fun</a></li><li id="main-menu-link-content90cb3a32-ccfa-4d6a-b991-25c0984fc222" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/disco" class="sf-depth-3" style="">Disco</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-content8c9afb57-da2d-49f3-a427-5706bf471ec8" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="" class="sf-depth-2 menuparent">Extra</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content48f61a54-233b-4e93-b401-f44e5cca0b0a" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/springkussens-overig" class="sf-depth-3" style="">Overig</a></li><li id="main-menu-link-contentb0c187b9-abe3-4cf0-a51a-75113ec54374" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/springkussen-accessoires" class="sf-depth-3" style="">Accessoires</a></li><li id="main-menu-link-contentd0ae2fd2-2eae-4c68-9d5c-9be58446598d" class="sf-depth-3 sf-no-children" style=""><a href="/springkussens/nieuw-assortiment" class="sf-depth-3" style="">Nieuw in assortiment</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></li></ul></li><li id="main-menu-link-content37160bdc-847a-4cd1-87dc-71f79c9f24c3" class="sf-depth-1 menuparent"><a href="/maatwerk" class="sf-depth-1 menuparent sf-with-ul">Maatwerk<span class="sf-sub-indicator"> »</span></a><ul class="sf-multicolumn sf-hidden" style="width: 576px;"><li class="sf-multicolumn-wrapper " style="width: 576px;"><ol style="width: 576px;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content8141d71d-a5cf-472a-be43-aca52d00eed4" class="sf-depth-2 sf-no-children"><a href="/maatwerk" class="all-items sf-depth-2">Alle items</a></li><li id="main-menu-link-content0553b750-800a-43ef-9199-089ff9c0790c" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="" class="sf-depth-2 menuparent">Springkussens en spelproducten</a><ol style="float: none; width: 288px;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content616fa539-4d28-4819-96b7-6ebc26439219" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/springkussens" class="sf-depth-3" style="">Springkussens</a></li><li id="main-menu-link-content3319cf4a-21f1-424d-8760-8f6bab41b0ae" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/speel-en-spel-structuren" class="sf-depth-3" style="">Speel- en spel structuren</a></li><li id="main-menu-link-contentc7d3e68f-01fb-4c75-b8fe-cc19d6301bb4" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/sport-structuren" class="sf-depth-3" style="">Sport structuren</a></li><li id="main-menu-link-contentf7e0a8d5-f42d-4ee4-974c-1a0a2d3a3954" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/boardings" class="sf-depth-3" style="">Boardings</a></li><li id="main-menu-link-contentf909981f-a9b6-4719-93bc-c64905c8de26" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/luchttenten" class="sf-depth-3" style="">Luchttenten</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><li id="main-menu-link-contentf0e1543d-74c6-471d-9057-3cbd21f59a1b" class="sf-depth-2 sf-multicolumn-column menuparent" style="width: 288px;"><div class="sf-multicolumn-column" style="width: 288px;"><a href="" class="sf-depth-2 menuparent">Reclame items</a><ol style="width: 288px; float: none;"><!-- THEME DEBUG --><!-- THEME HOOK: 'superfish_menu_items' --><!-- BEGIN OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --><li id="main-menu-link-content1f6b08ff-eabf-40ae-9735-2c29387ffc36" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/reclamebogen" class="sf-depth-3" style="">Reclamebogen</a></li><li id="main-menu-link-content57daf699-6edf-42fb-9653-74d96cbdf56a" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/blikvangers" class="sf-depth-3" style="">Blikvangers</a></li><li id="main-menu-link-content256895bc-58b3-416c-a9d4-f6402091d0ed" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/skydancers" class="sf-depth-3" style="">Skydancers</a></li><li id="main-menu-link-contentba99b08f-a069-4282-bac7-60b2c2f6a5dd" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/productvergrotingen" class="sf-depth-3" style="">Productvergrotingen</a></li><li id="main-menu-link-contentfa3800c6-0290-49b6-965f-0e90d155ca30" class="sf-depth-3 sf-no-children" style=""><a href="/maatwerk/mini-pvc" class="sf-depth-3" style="">Mini PVC</a></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></div></li><!-- END OUTPUT from 'modules/contrib/superfish/templates/superfish-menu-items.html.twig' --></ol></li></ul></li><li id="main-menu-link-contentff2bc4fb-78ac-4948-aaac-10d54f182c4a" class="sf-depth-1 sf-no-children"><a href="/over-ons" class="sf-depth-1">Over ons</a></li>

        </ul>

      </div>

      <form action="/zoek" method="get" id="views-exposed-form-search-product-result" accept-charset="UTF-8" class="search-header" data-drupal-form-fields="edit-search-api-fulltext">
        <div class="search-header__inner">

          <input placeholder="Search products" data-drupal-selector="edit-search-api-fulltext" type="text" id="edit-search-api-fulltext" name="search_api_fulltext" value="" size="30" maxlength="128" class="form-control">

          <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper input-group-append" id="edit-actions">

            <button data-twig-suggestion="search_header" data-drupal-selector="edit-submit-search" type="submit" id="edit-submit-search" value="Search" class="button js-form-submit form-submit search-header__button">
              <i class="fa fa-search"></i>
            </button>

          </div>

        </div>
      </form>

      <div data-quickedit-entity-id="block_content/29" id="block-contactbutton" class="contextual-region" data-quickedit-entity-instance-id="0">

        <a href="/contact" class="button button--secondary button--header">
          Contact
          <i class="fas fa-angle-right"></i>
        </a>

      </div>

    </div>

    <div class="cart-link">

      <a class="cart-link__link" href="/offertelijst">
        <i class="cart-link__icon"></i>
        <span class="cart-link__badge">1</span>
      </a>

    </div>

  </div>

</nav>

标签： jquerycsssuperfish

Answer 1

如果子菜单隐藏在其他元素中，只要没有父元素有position: relative;，您可以执行以下操作：

.submenu {
  position: absolute;
  top: 60px; /* however tall the nav menu is */
  left: 0;
  right: 0; 
}