导入Bootstrap后HTML下拉菜单无法正常工作的问题求助

你的自定义下拉菜单失效是因为类名冲突：Bootstrap内置了.dropdown类，它的默认样式会覆盖你写的.dropdown相关CSS，导致hover触发显示下拉内容的逻辑失效。

有两种简单的解决方式：

方式1：重命名自定义下拉菜单的类名 #

避免和Bootstrap的内置类名重复，比如把.dropdown改成.custom-dropdown，对应的HTML和CSS都做修改：

修改后的HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">  
<div class="menu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="custom-dropdown">
    <button class="custom-dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="custom-dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

修改后的CSS #

.menu {
  overflow: hidden;
  background-color: transparent;
  font-family: Arial;
}

.menu a {
  float: left;
  font-size: 25px;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

.custom-dropdown {
  float: left;
  overflow: hidden;
  position: relative; /* 确保下拉内容相对于它定位 */
}

.custom-dropdown .custom-dropbtn {
  font-size: 25px;
  border: none;
  color: white;
  padding: 15px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.menu a:hover, .custom-dropdown:hover .custom-dropbtn {
  color:white;
  text-decoration:underline;
  text-decoration-color:white;
}

.custom-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  top: 100%; /* 确保下拉内容在按钮下方 */
  left: 0;
}

.custom-dropdown-content a {
  float: none;
  color: black;
  padding: 15px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.custom-dropdown-content a:hover {
  background-color: #ddd;
}

.custom-dropdown:hover .custom-dropdown-content {
  display: block;
}

方式2：提高自定义CSS的优先级 #

通过给选择器添加父类前缀，让你的样式优先级高于Bootstrap的样式，同时补充必要的定位属性：

修改后的CSS关键部分 #

/* 用.menu .dropdown提高优先级，覆盖Bootstrap的样式 */
.menu .dropdown {
  float: left;
  overflow: hidden;
  position: relative; /* 必须添加，让下拉内容相对于这个容器定位 */
}

.menu .dropdown .dropbtn {
  font-size: 25px;
  border: none;
  color: white;
  padding: 15px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.menu a:hover, .menu .dropdown:hover .dropbtn {
  color:white;
  text-decoration:underline;
  text-decoration-color:white;
}

.menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  top: 100%;
  left: 0;
  z-index: 1000; /* 确保下拉内容在最上层，不被其他元素遮挡 */
}

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

• 移除Bootstrap CSS后正常，是因为没有了Bootstrap的.dropdown样式干扰，自定义CSS可以正常生效。
• 添加position: relative到下拉容器，是为了让绝对定位的下拉内容相对于它定位，避免位置偏移或被遮挡。

内容的提问来源于stack exchange，提问作者Κώστας Τσεμπερλίδης