Bootstrap导航菜单问题修复：悬停下拉、点击样式及移动端子菜单优化

Let's fix both of your navigation problems step by step:

1. Add Click-Active Background Style to Dropdown Items #

Currently, your dropdown items only have hover styles. To add a persistent background change when clicked, we'll use a custom class and jQuery to toggle it:

Update Your CSS: #

Add this rule to your custom.css to style the active state:

.dropdown-item.active-item {
  background-color: rgba(0, 123, 255, 0.1) !important; /* Soft blue background */
  opacity: 1;
}

Update Your JavaScript: #

Replace your custom.js code with this to handle click events:

$(document).ready(function() {
  // Set active class on clicked dropdown item
  $('.dropdown-item').click(function() {
    $('.dropdown-item').removeClass('active-item'); // Remove from other items
    $(this).addClass('active-item'); // Add to clicked item
  });

  // Fix submenu toggle behavior on mobile
  $('.dropdown-submenu .dropdown-toggle').click(function(e) {
    e.stopPropagation();
    $(this).parent('.dropdown-submenu').toggleClass('open');
    // Close other open submenus in the same parent menu
    $(this).closest('.dropdown-menu').find('.dropdown-submenu.open').not($(this).parent()).removeClass('open');
  });
});

2. Improve Submenu Parent Clarity on Mobile #

On screens smaller than 992px, we'll adjust the submenu layout to make parent-child relationships obvious:

Update Your Media Query in CSS: #

Replace your existing @media only screen and (max-width: 991px) block with this:

@media only screen and (max-width: 991px) {
  /* Change submenu to stack below parent instead of to the side */
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
    margin-left: 1rem; /* Indent to show hierarchy */
    width: calc(100% - 1rem);
  }

  /* Highlight parent item when submenu is open */
  .dropdown-submenu.open > .dropdown-toggle {
    background-color: rgba(0, 123, 255, 0.1);
    opacity: 1;
  }

  /* Rotate arrow to point down (matches submenu direction) */
  .dropdown-submenu a::after {
    transform: rotate(0deg);
    top: .9em;
  }
}

Full Modified Custom.css: #

.navbar-collapse .navbar-nav .dropdown .dropdown-menu{ 
  margin-left: 0px !important; 
  margin-top: 0px !important; 
} 

.dropdown-submenu { 
  position: relative; 
} 

.dropdown-submenu a::after { 
  transform: rotate(-90deg); 
  position: absolute; 
  right: 6px; 
  top: .8em; 
  transition: all 0.3s ease-in-out 0s; 
} 

.dropdown-submenu .dropdown-menu { 
  top: 0; 
  left: 100%; 
  margin-left: .1rem; 
  margin-right: .1rem; 
} 

.dropdown:hover>.dropdown-menu{ 
  display: block; 
} 

.dropdown-submenu:hover>.dropdown-menu{ 
  display: block; 
} 

@media only screen and (max-width: 991px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
    margin-left: 1rem;
    width: calc(100% - 1rem);
  }

  .dropdown-submenu.open > .dropdown-toggle {
    background-color: rgba(0, 123, 255, 0.1);
    opacity: 1;
  }

  .dropdown-submenu a::after {
    transform: rotate(0deg);
    top: .9em;
  }
} 

.submenuNav{ 
  opacity: 0.8; 
  margin-right: 3px; 
} 

.submenuNav:hover{ 
  opacity: 1; 
  transform: translateX(3px); 
  transition: 0.4s all ease; 
  margin-right: 0px; 
} 

.dropdown-item{ 
  background-color: transparent !important; /* Fixed invalid "none" value */
  color: #007bff; 
  opacity: 0.8; 
} 

.dropdown-item:hover{ 
  background-color: transparent !important; /* Fixed invalid "none" value */
  color: #007bff; 
  opacity: 1; 
  transition: 0.2s all ease; 
} 

.dropdown-item.active-item {
  background-color: rgba(0, 123, 255, 0.1) !important;
  opacity: 1;
}

.customNav{ 
  background-color: transparent !important; /* Fixed invalid "none" value */
  color:#007bff !important; 
} 

.navbar .navbar-toggler .navbar-toggler-icon{ 
  background-color: #007bff; 
}

Note: I fixed background-color: none to transparent because "none" isn't a valid value for background-color.

内容的提问来源于stack exchange，提问作者dipesh