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

resultaResulta 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.

Este es el codigo HTML:

<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>

CSS

.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>
.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;
}
 

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.

Este es el codigo HTML:

<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>

CSS

.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;
}

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>
 

Origen Enlace

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.

Este es el codigo HTML:

<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>

CSS

.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;
}