Я добавил выпадающую кнопку со стрелкой вниз (изображение) с помощью https://www.w3schools.com/howto/howto_js_dropdown.asp. Однако после добавления изображения стрелки вниз область изображения кнопки не может быть нажата? Не совсем уверен, что здесь пошло не так, кнопка все еще работает.
HTML:
<html>
<head>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}</script>
</head>
<body>
<!-- dropdown feature -->
<div class="dropdown">
<button onclick="dropdownMenu()" class="dropbtn">User
<!--image cant be clicked???-->
<img src="images.png" style="height:8px; width:10px; margin-bottom: 2px; margin-left: 5px;">
</button>
<!-- dropdown content -->
<div id="myDropdown" class="dropdown-content">
<a href="profile.html">Profile</a>
<a href="settings.html">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</body>
</html>
CSS:
.dropbtn {
background-color: white;
color: black;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer;
position: absolute;
top: -69.5px;
left: 1280px;
border-radius: 4px;
width: 90px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: rgb(218, 218, 218);
}
.dropdown {
position: absolute;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: -20px;
left: 1210px;
background-color: #f1f1f1;
min-width: 164px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 6px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
Может кто-нибудь помочь, пожалуйста определить в чем здесь ошибка? Большое спасибо!