html - 创建下拉菜单
问题描述
我是一名正在接受培训的开发人员,当我将鼠标悬停在“音乐”和“播客”列表项上时,我试图让这段代码显示一个下拉菜单。但我似乎无法让它工作,我做错了什么?我发现有些人在做同样的事情,但我的列表从未显示,这当然是合乎逻辑的,display: none;
但我希望它在悬停在音乐或播客上后显示。对不起,但我仍在学习它是否凌乱/糟糕。
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
<a href="/pages/test.html">Shows</a>
<a href="/pages/test.html">Live</a>
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
解决方案
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
<a href="#home">Home</a>
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/pages/test.html">Shows</a>
<a href="/pages/test.html">Live</a>
</div>
</div>
<a href="#news">Live</a>
<a href="#news">About us</a>
</div>
参考链接:https ://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
推荐阅读
- java - 在 MacOS 上安装 R 并从源代码编译包 - 组件和步骤以使事情正常运行
- reactjs - 如何在 TypeScript 中创建一个让我处理事件的 React 组件?
- sql - 如何计算两个日期之间的月数和天数,而不在 SQL Server 中返回负值
- java - 为什么 JSON 没有被解组到我的 Java 类中?
- python - 如何使用 tkinter 和 turtle 获得鼠标位置?
- apache-poi - 由于 xmlbeans 在 weblogic 中卡住了线程
- javascript - 为什么 Phantomjs 不适用于此站点?
- sql - 为什么我的子查询使用字符串而不是字段引用?
- php - 是否可以从 PHP 文件发送标头,这完全没有任何作用
- rasa-core - Rasa 自定义操作事件丢失