我正在尝试使用Bulma在我的网站上实现导航栏megamenu，因为这是我发现的唯一可以正常工作且不会干扰网站上已有代码的框架。我以前从未使用过Bulma，并且只有一些CSS，HTML和PHP的基础知识。
导航栏在台式机版本上运行良好，但在移动版本上却遇到问题。默认情况下，下拉菜单是展开的，我无法弄清楚如何禁用此行为。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://res.cloudinary.com/rosaritoliving/raw/upload/v1564503077/Baja123%20Menu/megamenu_1564427792.css">
<script>
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
</script>
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.baja123.com">
<img src="https://mlvtslglmiuu.i.optimole.com/otn1P_eJnbI/w:461/h:92/q:auto/https://www.rosaritoliving.com/wp-content/uploads/logo-baja123-real-estate.png" alt="Baja123 Baja's Best Real Estate Website" width="150" height="50">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com">HOME</a></div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">OCEANFRONT LISTINGS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">BAJA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/BAJA_LIVING/page_2312494.html">About Baja California</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ROSARITO REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_REAL_ESTATE/page_1754239.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_ROSARITO_MAIN_PAGE_BUYERS_GUIDE/page_2615332.html">About Rosarito Beach</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TIJUANA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_REAL_ESTATE_LISTINGS/page_1754238.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_BUYERS_GUIDE/page_2649211.html">About Tijuana</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ENSENADA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_REAL_ESTATE_LISTINGS/page_1754240.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_BUYERS_GUIDE/page_2650491.html">About Ensenada</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">BAJA LIVING</div>
<div id="blogDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">UTILITIES AND SERVICES</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Water_Company/page_2312474.html">Water Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Electric_Company/page_2522445.html">Electric Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Gas_Company/page_2522339.html">Gas Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Telephone_Service/page_2313221.html">Telephone Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Internet_Service/page_2313224.html">Internet Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Cellular_Service/page_2313222.html">Cellular Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Television_Service/page_2313223.html">TV Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_How_to_Dial_Phones/page_2313225.html">How to Dial Phones in Mexico</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Emergency_Numbers/page_2522342.html">Emergency Phone Numbers</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">MOVING YOUR FURNITURE TO THE ROSARITO AREA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_YOUR_PERSONAL_PROPERTY_INTO_MEXICO/page_2313227.html">Moving Instructions</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Options</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">AUTO INFORMATION</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/DRIVING_A_US_VEHICLE_IN_MEXICO/page_2313790.html">Driving your Car in Baja</a>
<a class="navbar-item" href="https://www.baja123.com/DRIVING_TIPS_AND_RULES_FOR_MEXICO/page_2313786.html">Driving Tips and Information</a>
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurancce Services</a>
<a class="navbar-item" href="https://www.baja123.com/MECHANICS_IN_THE_ROSARITO_BEACH_AREA/page_2313784.html">Auto Repair Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">HEALTH CARE, HOSPITALS AND DOCTORS IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/HEALTHCARE_DOCTORS_DENTISTS_AND_HOSPITALS/page_2054379.html">Healthcare, Doctors, Dentists and Hospitals</a>
</div>
</div>
<hr class="navbar-divider">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">INSURANCE SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/MEDICAL_INSURANCE_IN_MEXICO/page_2313292.html">Medical Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/HOMEOWNER_INSURANCE_IN_MEXICO/page_2313290.html">Homeowners Insurance Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PETS AND VETS</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_PETS_INTO_MEXICO/page_2058791.html">Bring your Pet to the Rosarito Area</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PROFESSIONAL SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/IMMIGRATION_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_1681440.html">Immigration Services</a>
<a class="navbar-item" href="https://www.baja123.com/MAIL_SERVICE_IN_ROSARITO_BEACH/page_2522113.html">Mail Services</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
<a class="navbar-item" href="https://www.baja123.com/LEGAL_SERVICES_IN_MEXICO/page_2313260.html">Legal Services</a>
<a class="navbar-item" href="https://www.baja123.com/ACCOUNTING_IN_MEXICO/page_2313261.html">Accounting Services</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Services</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
<a class="navbar-item" href="https://www.baja123.com/CLOSING_SERVICES_FOR_BAJA_REAL_ESTATE/page_2645211.html">Closing Services</a>
<a class="navbar-item" href="https://www.baja123.com/PROPERTY_MANAGEMENT_IN_MEXICO/page_2313213.html">Property Management</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TRANSPORTATION SERVICES</h1>
<a class="navbar-item" href="https://www.baja123.com/GETTING_AROUND_IN_THE_ROSARITO_BEACH_AREA/page_2313801.html">Transportation in Rosarito Beach</a>
</div>
</div>
<hr class="navbar-divider">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">SHOPPING IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/BUYING_FOOD_IN_MEXICO/page_2313807.html">Supermarkets & Convenience Stores</a>
<a class="navbar-item" href="https://www.baja123.com/BUYING_HOUSEHOLD_FURNISHINGS_IN_MEXICO/page_2313809.html">Furniture & Appliances</a>
</div>
</div>
</div>
</div>
<div class="column">
<div class="navbar-content">
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">
SELLERS & BUYERS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Baja Real Estate</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-search "></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/LIST_YOUR_ROSARITO_BEACH_PROPERTY/page_2198558.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>List Your Property</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-usd"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/Newsletter/page_2517204.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Hot Property Alert</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-bullhorn"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/MEXICO_BUYERS_GUIDE/page_2609247.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Buyer's Guide</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-compass"></i>
</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-item">
<a class="navbar-item" href="http://blog.baja123.com/" target="_blank">BLOG</a></div>
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com/CONTACT_US/page_1232095.html">CONTACT US</a></div>
</nav>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});</script>
我需要在移动版本上默认折叠下拉菜单，现在默认情况下它们已展开。对你的帮助表示感谢。