Почему мое выпадающее меню появляется только наполовину?
Я создавал копию веб-страницы Google. У меня все готово, но раскрывающееся меню для значка приложений отображается только наполовину. Я уже пытался увеличить высоту и т. д. Я думаю, что это не отображается после части заголовка. Пожалуйста, предложите любые возможные ошибки, которые я мог совершить.
CSS
<style>
.menu-btn
{background-color:#f5f5f5 ;
color: black;
font-family: sans-serif;
border: none;}
.dropdown-menu {
position: relative;
display: inline-block;
position: relative;
display: inline-block;
border:1% solid #3c4043;}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
right: 0;
align-items:center;
border-radius: 3%;
border:1% solid #black;
width:300px;
height: 500px;
cursor: pointer;}
</style>
**<javascript>**
<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
if (menuContent.style.display== = ""){
menuContent.style.display = "block";}
else {
menuContent.style.display = "";}
})
</script>
@ Clvckl3s Clvckl3s слишком большой для меня, чтобы поместить его здесь. но в основном я использовал строки и столбцы следующим образом:<div class = "dropdown-menu"> <button class = "menu-btn"><i class = "fa fa-bars"></i></button> <div class = "menu-content"> <div class = "row"> <div class = "column"> .....
почему бы вам не отредактировать сообщение и не добавить код HTML таким образом?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У вас есть дополнительный : в высоте для вашего класса содержимого меню.
Есть также несколько других ошибок в CSS. Я создал jsfiddle, который может помочь вам понять, что не так с вашим собственным кодом.
https://jsfiddle.net/6ck7rq53/6/
Я создал простой раскрывающийся список HTML, используя ваши собственные классы:
<html>
<body>
<div class = "dropdown-menu">
<button class = "menu-btn">Dropdown
<div class = "menu-content">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</button>
</div>
</body>
</html>
и я исправил ваши ошибки CSS:
.menu-btn {
background-color: #f5f5f5;
color: black;
font-family: sans-serif;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
border: 1px solid #3c4043;
height: auto;
}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
right: 0;
align-items: center;
border-radius: 3%;
border: 1px solid black;
width: 300px;
height: 500px;
cursor: pointer;
left: 0;
}
Где html код?