Skip to main content
2 de 2
Código movido a snippet
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

Interferencias con bootstrap 5.3.2 y CSS

Resulta que tengo un contenedor que uso debajo de la barra de navegación, y quiero que el desplegable dropdown menu tenga el fondo predefinido en "bg-dark" y "bg-opacity-90" lo que es un gris claro. Además no consigo establecer las letras en negro.

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

.custom-dropdown .dropdown-toggle {
  color: black !important;
  /* Color de texto negro */
  background-color: transparent !important;
  /* Fondo transparente */
  text-decoration: none !important;
  /* Sin subrayado */
}

.custom-dropdown .dropdown-menu {
  background-color: rgb(black, 0.1) !important;
  /* Fondo gris claro */
}

.custom-dropdown .dropdown-item {
  color: black !important;
  /* Color de texto negro */
  text-decoration: none !important;
  /* Sin subrayado */
  background-color: rgb(black, 0.1) !important;
  /* Fondo gris claro */
}

.bg-opacity-90 {
  opacity: 0.1;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid max-width-container position-relative">
  <!-- Primer Contenedor (Barra de opciones) -->
  <div class="row bg-dark bg-opacity-90">
    <div class="col-12">
      <!-- Opciones en la barra alargada -->
      <ul class="list-inline">
        <li class="list-inline-item">
          <div class="custom-dropdown">
            <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Comunicación</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="">Carnets</a></li>
              <li><a class="dropdown-item" href="#">Opción 2</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>