Я пытаюсь попрактиковаться на Html - CSS. Я использовал несколько сеток и создал простой дизайн, я пытаюсь добавить наведение под кнопкой MUSIC, как раскрывающийся список на панели навигации.
<!DOCTYPE html>
<html>
<head>
<link href="linkin park web page.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="page">
<div id="logo">
<img src="logo.jpeg" alt="logo" height="50px" width="50px">
</div>
<div class="topwriting">LINKIN PARK </div>
<div class="list">
<div><a class="main" href="Home.html">HOME</a></div>
<div><a class="main" href="Home.html" >ABOUT</a></div>
<div class="button"><button class="buttonview">MUSIC</button>
<div class="dropdown_content">
<a id= altbutton1> albums</a>
<a id= altbutton2> singles</a>
<a id= altbutton3> others</a>
</div>
</div>
<div><a class="main" href="Home.html">VIDEOS</a></div>
<div><a class="main" href="Home.html">CONTACT</a></div>
</div>
<div>
<!--<img id="p1" src="photos/f1.jpeg" alt="photo 1" height="220px" width="320px">
<img id="p2" src="photos/f2.jpg" alt="photo 2" height="220px" width="320px">
<img id="p3" src="photos/f3.jpg" alt="photo 3" height="220px" width="320px">
<img id="p4" src="photos/f5.jpg" alt="photo 4" height="220px" width="320px">
<img id="p5" src="photos/f6.jpg" alt="photo 5" height="220px" width="320px">
<img id="p6" src="photos/f7.jpg" alt="photo 6" height="220px" width="320px" >
-->
</div>
<div><p id="lastquote"> “The hardest part of ending is starting again.” </p></div>
</div>
</body>
</html>
body{
background-image: url("album covers.jpg");
color: white;
}
#page{
max-width: 900px;
min-width: 999px;
padding: 20px;
margin: auto;
background-color: black;
border-radius: 10px;
display: grid;
grid-template-rows: 2fr, 2fr, 15fr, 2fr;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
}
.list{
border: white solid 1px;
display: grid;
grid-template-columns: repeat(5,1fr);
text-align: center;
overflow: hidden;
}
.list>div>a , .button{
text-decoration: none;
font-size: 2em;
color: white;
}
.topwriting{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
color: white;
font-size: 50px;
letter-spacing: 0.0001em;
text-align: center;
padding-top: 0em;
border-width: 2px;
border: white;
border-style: none;
margin-top: 0em;
}
#logo{
border-width: 2px;
border: white;
border-style: solid;
margin-bottom: 0em;
width: 5% ;
margin: 10px auto 25px auto ;
}
.button{
position: relative;
float: left;
overflow: hidden;
}
.buttonview{
text-decoration: none;
background-color: inherit;
color: inherit;
border: none;
font-size: inherit;
font-family: inherit;
}
.buttonview:hover{
background-color: cadetblue;
}
.dropdown_content{
display: none;
position: absolute;
background-color: cadetblue;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.button>div>a{
display: block;
padding: 12px 16px;
float: none;
text-decoration: none;
text-align: left;
}
.button>div>div>a:hover{
background-color: red;
}
.button:hover .dropdown_content{
display: block;
}
#lastquote{
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
font-style: italic;
text-align: center;
letter-spacing: 0,05px;
}
dropdown-content должно появиться под кнопкой MUSIC, но ничего не отображается или все dropdown-content остаются прямо под кнопкой. Как я могу добавить раскрывающийся список под MUSIC при наведении курсора? Что не так с моим кодом?