所以我目前正在尝试为水平导航制作一个下拉菜单。我希望所有三个按钮看起来都一样，但当悬停在导航中的"产品"上时，我希望它显示三个产品类别"；轮廓"眉毛；以及"；嘴唇；作为下拉列表，然后点击并将我带到他们各自的页面。
我尝试了很多方法，但它始终不起作用，或者保持我现在想要的导航格式，所以看起来不一致。
有人能帮我创建一个吗？下面我将附上主页的HTML和CSS。
/*Bella Beauty Logo*/
h1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
}
/*Navigation*/
#navBar {
display: inline;
padding: 1000px 170px;
font-family: Cinzel;
font-color: #000000;
font-weight: bold;
font-size: 17pt;
}
/*Showcase/Hero Image*/
#HeroImage {
width: 100%;
height: 650px;
}
/*Showcase/Hero Text*/
#BannerText {
text-align: center;
position: absolute;
top: 95%;
left: 30%;
transform: translate(-50%, -50%);
}
/*Showcase/Hero Shop Button*/
.ShopNowbtn {
position: absolute;
top: 115%;
left: 30%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #D8F9FF;
color: #d604ac;
font-size: 18pt;
font-family: Cinzel;
font-weight: bold;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
/*Showcase/Hero Title Text*/
#Welcome1 {
font-family: Cinzel;
font-size: 25pt;
color: #D8F9FF;
font-weight: bold;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Showcase/Hero Desc Title*/
#Welcome2 {
font-family: Arial;
font-size: 19pt;
color: #D8F9FF;
}
#header {
background-color: #D8F9FF;
}
#content {
background-color: white;
}
/*Business Journey Part 1- Title*/
#BeginTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 1- Description*/
#BeginDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 1- Description*/
#BeginDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 1- Picture*/
#BeginPic {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/*Business Journey Part 2- Title*/
#CreationTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 2- Description*/
#CreationDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 2- Description*/
#CreationDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 2- Picture*/
#CreationPic {
display: block;
width: 40%;
margin-left: auto;
margin-right: auto;
height: 450px;
}
/*Business Journey Part 3- Title*/
#LocationTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 3- Description*/
#LocationDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 3- Description*/
#LocationDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 3- Picture*/
#LocationPic1 {
display: block;
float: left;
padding: 5px;
width: 47%;
height: 450px;
background-color: white;
padding-bottom: 30px;
}
/*Business Journey Part 3- Picture*/
#LocationPic2 {
display: block;
float: right;
padding: 5px;
width: 47%;
height: 450px;
background-color: white;
padding-bottom: 30px;
}
/*Business Journey Part 4- Title*/
#OpenTitle {
font-family: Cinzel;
color: black;
font-size: 22pt;
text-align: center;
text-decoration: underline;
text-decoration-color: #d604ac;
}
/*Business Journey Part 4- Description*/
#OpenDesc1 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 4- Description*/
#OpenDesc2 {
font-family: Arial;
color: black;
text-align: center;
font-size: 19pt;
}
/*Business Journey Part 4- Picture*/
#ShopInterior {
display: block;
width: 40%;
margin-left: auto;
margin-right: auto;
height: 400px;
padding-bottom: 20px;
}
/*Map & Opening Hours Border*/
#Border {
height: 600px;
width: 600px;
margin-left: auto;
margin-right: auto;
outline-style: dotted;
outline-color: #d604ac;
outline-width: 3px;
}
/*Interactive Map*/
#Map {
display: block;
width: 65%;
padding-top: 50px;
margin-left: auto;
}
/*Bella Beauty Opening Hours*/
#OpeningHours {
display: block;
font-family: Cinzel;
font-weight: bold;
font-size: 18pt;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/*Social Dimensions*/
.Socials {
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/*Facebook Icon*/
#Facebook {
width: 100px;
height: auto;
}
/*Instagram Icon*/
#Instagram {
width: 100px;
height: auto;
}
/*Twitter Icon*/
#Twitter {
width: 100px;
height: auto;
}
#footer {
text-align: center;
background-color: #F1FDFF;
color: black;
font-family: Cinzel;
font-weight: bold;
}<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<!--Linking Google Font- Cinzel-->
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<div id="header">
<!--Bella Beauty Branding Logo-->
<h1><img src="Bella Beauty Logo.png" alt="Bella Beauty Logo"></h1>
<div id="nav">
<!--Navigation Bar-->
<ul>
<li id="navBar"><a href="Home.html">Home</a></li>
<li id="navBar"><a href="#">Products</a></li>
<li id="navBar"><a href="Staff.html">Staff</a></li>
</ul>
</div>
</div>
<!--Header-->
<div id="content">
<div id="Banner">
<!--Showcase/Hero Image-->
<img id="HeroImage" src="Banner.jpg" alt="Bella Beauty Banner">
<!--Text and Button over showcase image-->
<div id="BannerText">
<p id="Welcome1">Welcome</p>
<p id="Welcome2">to Bella Beauty, a thriving local salon in the heart of Belfast</p>
</div>
<button class="ShopNowbtn">Shop Now > </button>
</div>
<!--Journey To Business Part 1-->
<div class="Beginnings">
<p id="BeginTitle">Where It All Began</p>
<p id="BeginDesc1">At the point when Claire was only 18 she began doing her friends makeup for all the events you could imagine, from intense Prom looks to sentimental date looks, she truly could do everything!</p>
<p id="BeginDesc2">The more she did, the more people she had asking her to their makeup...they where even willing to pay!</p>
<img id="BeginPic" src="BeginPic.jpg" alt="Claire beginning as a makeup artist">
</div>
<!--Journey To Business Part 2-->
<div class="Creation">
<p id="CreationTitle">Bella Beauty Is Created</p>
<p id="CreationDesc1">Claire enjoyed doing young womens makeup so much and empowering women around her she chose to transform it into a business!</p>
<p id="CreationDesc2">Claire began by making the name 'Bella Beauty' after the word 'Bella' signifying 'Beautiful' in Italian. She felt it said a lot about the business she wanted to create by making young women beautiful by enhancing their finest facial features not covering them up!</p>
<img id="CreationPic" src="CreationPic.jpg" alt="Claire creating Bella Beauty">
</div>
<!--Journey To Business Part 3-->
<div class="NewLocation">
<p id="LocationTitle">Bella Beauty Comes To Belfast</p>
<p id="LocationDesc1">The time had come to get a premises and Claire fell in love with Belfast. After a long hunt and heaps of viewings she at last chose a highstreet space outside the esteemed 'Victoria Square'.</p>
<p id="LocationDesc2">A space on the highstreet gave Claire the ideal opening to many customers strolling by while building was in progress and the word began to get out about a brand new beauty shop coming to town!</p>
<img id="LocationPic1" src="LocationPic1.jpg" alt="Victoria Square">
<img id="LocationPic2" src="LocationPic2.jpg" alt="Bella Beauty Under Construction">
</div>
<!--Journey To Business Part 4-->
<div class="BusinessOpen">
<p id="OpenTitle">Bella Beauty Opens For Business</p>
<p id="OpenDesc1">After a considerable delay with development and lots of time spent ensuring everything looked perfectly like Claire's vision...she opened, sold her first item and extended her team to three staff!</p>
<p id="OpenDesc2">Bella Beauty is now a bustling business offering a range of cosmetics items to start young makeup artists and amateurs to return home and start on their journey into the art of makeup and maybe one day, a customer will follow in Claires footsteps.</p>
<img id="ShopInterior" src="ShopInterior.jpg" alt="Inside Bella Beauty">
</div>
<!--Map & Opening Times-->
<div id="Border">
<div id="Map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1155.6432572904432!2d-5.927957941836744!3d54.59894504885941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48610855d362c579%3A0x5385d89154488f3a!2s5-19%20Ann%20St%2C%20Belfast%20BT1%204EA!5e0!3m2!1sen!2suk!4v1605143571609!5m2!1sen!2suk" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<div id="OpeningHours">
<p>Monday-Friday: 9am-4pm</p>
<p>Saturday: 9am-6pm</p>
<p>Sunday: Closed</p>
</div>
</div>
<!--Footer with Social Media Links-->
<div id="footer">
<div class="Socials">
<a href="https://www.facebook.com/studyatulster/">
<img id="Facebook" src="Facebook.png" alt="Facebook">
</a>
<a href="https://twitter.com/UlsterUni?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img id="Twitter" src="Twitter.png" alt="Twitter">
</a>
<a href="https://www.instagram.com/ulsteruni/?hl=en">
<img id="Instagram" src="Instagram.png" alt="Instagram">
</a>
</div>
<p>Bella Beauty - Copyright 2020</p>
</div>
</body>
</html>当我学习编码时，我从w3schools学到了很多在你的情况下，我想参考这个页面：
https://www.w3schools.com/Css/css_dropdowns.asp
所描述的方法不需要任何JavaScript来工作
您的CSS离下拉菜单很远。你似乎还没有添加：hover属性，或者你不熟悉一些CSS属性https://www.youtube.com/watch?v=wHFflWvii3M从中可以学习下拉菜单如果有帮助，请告诉我。