添加悬停在 CSS 中的下拉框
Adding a dropdown box with hover in CSS
我正尝试在 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 下方添加下拉框？我的代码有什么问题？
从下拉列表内容中删除 position:absolute
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;
}
<!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>
或者你可以试试w3的版本：
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
</body>
</html>
我正尝试在 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 下方添加下拉框？我的代码有什么问题？
从下拉列表内容中删除 position:absolute
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;
}
<!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>
或者你可以试试w3的版本：
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
</body>
</html>