Estoy haciendo una página web. He introducido un dropdown-button
, pero me da problemas. En el menú, si pones el ratón sobre un botón, se vuelve azul claro, pero en el botón Multimedia (dropdown-button
), no funciona el hover
.
¿Cómo puedo solucionarlo?
Aquí el problema en vivo: https://gyazo.com/fbb3e3f7084e8d3a24ec8c9d2f714c2c
Aquí el CSS y el HTML:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15.6%;
background-color: #e0e0e0;
position: fixed;
height: 600px;
overflow: auto;
right:1129px;
top:47px;
border:1px solid #939496;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-size:30px;
}
li a.active {
background-color: #309ba5;
color: white;
}
li a:hover:not(.active) {
background-color: #4dd6e2;
color: white;
}
.dropbtn {
background: #e0e0e0 url('https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png') no-repeat 0;
background-size: 25px 25px;
color: black;
padding: 16px 25px;
font-size: 30px;
border: none;
outline: none;
cursor: pointer;
font-family: Times New Roman;
position:fixed;
left: 9px;
top:148px;
width: 210px;
height: 55px;
}
.active {
background-color: #309ba5;
color: white;
}
.dropdown {
width: 190px;
}
.dropdown-content {
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position: fixed;
top: 170px;
left: 220px;
background-color: #ededed;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size:27px;
}
.dropdown a:hover {background-color: #e2e2e2}
.show {display:block;}
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="aboutme"><a href="aboutme.html">About</a></li>
</ul>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Multimedia</button>
<div id="myDropdown" class="dropdown-content">
<a href="mp4.html">MP4</a>
<a href="png.html">PNG</a>
<a href="gif.html">GIF</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>