Skip to main content
adicionou 93 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   /* metade transparente: alpha = .5 */
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}

Caso não queira alterar a classe nativa, siga o que informa a resposta do @Renan Osorio.

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   /* metade transparente */
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   /* metade transparente: alpha = .5 */
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}

Caso não queira alterar a classe nativa, siga o que informa a resposta do @Renan Osorio.

adicionou 34 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   /* metade transparente */
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   /* metade transparente */
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Altere a propriedade background-color da classe .dropdown-menu usando a notação rgba se quiser deixar semi-transparente alterando o canal alpha:

body{
   background: yellow !important;
}

.dropdown-menu{
   background-color: rgba(255, 255, 255, .5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<li class="dropdown nav-item">
   <a data-toggle="dropdown" class="dropdown-toggle nav-link js-scroll-trigger">Clientes</a>
    <ul class="dropdown-menu">
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#"> Depoimentos </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">2ª via do boleto </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Atendimento </a></li>
         <li class="nav-item">  <a class="nav-link js-scroll-trigger" href="#">Seja um revendedor </a></li>
     </ul>
 </li>

Se quiser totalmente transparente, coloque o valor transparent:

.dropdown-menu{
   background-color: transparent !important;
}