Bonjour à tous,
Je fais vite, je travail sur un projet en ce moment, et je me retrouve confronté à un petit problème assez chiant pour rester poli..
Je suis en train de refaire un systeme de bouton dropdown à la Material Design de Google (faut avouez que c'est moins déguelasse que les selects natifs), et le problème est que ma liste qui apparait en cliquant sur le dropdown, apparait bien, elle est visible, mais impossible d'intéragir avec elle.. En réalité elle est transparente parceque j'ai toujours accès au bouton du dropdown dessous, et a d'autre lien qui sont caché par le menu dropdown.. L'effet ":hover" du coup ne marche pas sur les items du menu, au même titre que le "click".
Voici une image pour illustrer mon problème:
Voici le bout de code concerné:
<button title="Trier par..." class="btn-dropdown">
<div class="dropdown-select">
<span class="dropdown-option">Trier par...</span>
<span class="dropdown-icon">
<i class="fa fa-caret-down fa-2x"></i>
</span>
</div>
<div class="dropdown-options">
<ul>
<li>Extensions</li>
<li>Nom</li>
<li>Auteur</li>
<li>Date de création</li>
<li>Date de modification</li>
</ul>
</div>
</button>
Et voici le CSS:
button.btn-dropdown{
position: relative;
min-width: 64px;
height: 36px;
padding: 0 8px;
background-color: #F5F5F5;
border-radius: 2px;
}
button.btn-dropdown:hover{
background-color: #CF691E;
color: #FFFFFF;
transition: all;
transition-duration: 0.3s;
}
button.btn-dropdown .dropdown-select{
display: flex;
align-items: center;
justify-content: space-between;
}
button.btn-dropdown span.dropdown-option{
order: 1;
font-weight: 400;
font-size: 1.1em;
}
button.btn-dropdown span.dropdown-icon{
order: 2;
margin-left: 16px;
}
button.btn-dropdown .dropdown-options{
display: none;
position: absolute;
top: 0;
left: 0;
min-width: 168px;
max-width: 336px;
z-index: 999;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: #FFFFFF;
}
button.btn-dropdown .dropdown-options ul{
padding: 8px 0;
}
button.btn-dropdown .dropdown-options ul li{
height: 48px;
padding: 0 16px;
line-height: 48px;
font-size: 1.1em;
font-weight: 400;
text-align: left;
}
button.btn-dropdown .dropdown-options ul li:hover{
background-color: #CF691E;
color: #FFFFFF;
cursor: pointer;
}
Donc voilà, vous l'aurez compris, ma question est la suivante: comment faire pour intéragir avec la div, qui même si elle est visible reste transparente... ?
Merci d'avance pour précieuse aide ! :D