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