创建下拉菜单Nav-HTML/CSS Bella Beauty

因此，我目前正在尝试为我的水平导航制作一个下拉菜单。我希望所有三个按钮看起来都一样，但当鼠标悬停在nav中的“产品”上时，我希望它将三个产品类别“轮廓”、“眉毛”和“嘴唇”显示为下拉列表，然后单击并将我带到它们各自的页面

我已经尝试了很多方法，但它从来都不起作用，也不符合我现在想要的导航格式，所以看起来不一致

有人能帮我做一个吗？下面我将附加主页的HTML和CSS

/*贝拉美容标志*/
h1{
显示：块；
左边距：自动；
右边距：自动；
宽度：15%；
}
/*航行*/
#导航栏{
显示：内联；
填充：1000px 170px；
字体系列：Cinzel；
字体颜色：#000000；
字体大小：粗体；
字号：17号；
}
/*展示/英雄形象*/
#英雄法师{
宽度：100%；
高度：650px；
}
/*展示/英雄文本*/
#横幅文字{
文本对齐：居中；
位置：绝对位置；
最高：95%；
左：30%；
转换：翻译（-50%，-50%）；
}
/*Showcase/Hero Shop按钮*/
.ShopNowbtn{
位置：绝对位置；
最高：115%；
左：30%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
背景色：#D8F9FF；
颜色：#d604ac；
字号：18pt；
字体系列：Cinzel；
字体大小：粗体；
填充：12px 24px；
边界：无；
光标：指针；
边界半径：5px；
}
/*展示/英雄标题文本*/
#欢迎1{
字体系列：Cinzel；
字号：25pt；
颜色：#D8F9FF；
字体大小：粗体；
文字装饰：下划线；
文字装饰颜色：#d604ac；
}
/*展示/英雄描述标题*/
#欢迎2{
字体系列：Arial；
字号：19pt；
颜色：#D8F9FF；
}
#标题{
背景色：#D8F9FF；
}
#内容{
背景色：白色；
}   
/*商务旅行第1部分-标题*/
#开始{
字体系列：Cinzel；
颜色：黑色；
字号：22号；
文本对齐：居中；
文字装饰：下划线；
文字装饰颜色：#d604ac；
}
/*商务旅行第1部分-说明*/
#BeginDesc1{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第1部分-说明*/
#开始2{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第1部分-图片*/
#贝金皮奇{
显示：块；
宽度：50%；
左边距：自动；
右边距：自动；
}
/*商务旅行第2部分-标题*/
#创作标题{
字体系列：Cinzel；
颜色：黑色；
字号：22号；
文本对齐：居中；
文字装饰：下划线；
文字装饰颜色：#d604ac；
}
/*商务旅行第2部分-说明*/
#创作主题1{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第2部分-说明*/
#创作主题2{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第2部分-图片*/
#创造性{
显示：块；
宽度：40%；
左边距：自动；
右边距：自动；
高度：450px；
}
/*商务旅行第3部分-标题*/
#地点名称{
字体系列：Cinzel；
颜色：黑色；
字号：22号；
文本对齐：居中；
文字装饰：下划线；
文字装饰颜色：#d604ac；
}
/*商务旅行第3部分-说明*/
#位置描述1{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第3部分-说明*/
#位置描述2{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第三部分-图片*/
#位置PIC1{
显示：块；
浮动：左；
填充物：5px；
宽度：47%；
高度：450px；
背景色：白色；
填充底部：30px；
}
/*商务旅行第三部分-图片*/
#位置PIC2{
显示：块；
浮动：对；
填充物：5px；
宽度：47%；
高度：450px；
背景色：白色；
填充底部：30px；
}
/*商务旅行第4部分-标题*/
#OpenTitle{
字体系列：Cinzel；
颜色：黑色；
字号：22号；
文本对齐：居中；
文字装饰：下划线；
文字装饰颜色：#d604ac；
}
/*商务旅行第4部分-说明*/
#OpenDesc1{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第4部分-说明*/
#OpenDesc2{
字体系列：Arial；
颜色：黑色；
文本对齐：居中；
字号：19pt；
}
/*商务旅行第四部分-图片*/
#商店内部{
显示：块；
宽度：40%；
左边距：自动；
右边距：自动；
高度：400px；
垫底：20px；
}
/*地图及开放时间*/
#边界{
高度：600px；
宽度：600px；
左边距：自动；
右边距：自动；
轮廓样式：虚线；
轮廓颜色：#d604ac；
轮廓宽度：3倍；
}
/*交互式地图*/
#地图{
显示：块；
宽度：65%；
填充顶部：50px；
左边距：自动；
}
/*贝拉美容中心开放时间*/
#开放时间{
显示：块；
字体系列：Cinzel；
字体大小：粗体；
字号：18pt；
填充顶部：20px；
左边距：自动；
右边距：自动；
文本对齐：居中；
}
/*社会层面*/
.社交{
显示：内联块；
左边距：自动；
右边距：自动；
宽度：50%；
}
/*Facebook图标*/
#脸谱网{
宽度：100px；
高度：自动；
}
/*Instagram图标*/
#Instagram{
宽度：100px；
高度：自动；
}
/*推特图标*/
#推特{
宽度：100px；
高度：自动；
}
#页脚{
文本对齐：居中；
背景色：#F1FDFF；
颜色：黑色；
字体系列：Cinzel；
字体大小：粗体；
}

家





欢迎光临

致Bella Beauty，一家位于贝尔法斯特市中心的蓬勃发展的当地沙龙
立即购物>
这一切从哪里开始

在克莱尔只有18岁的时候