Html 在Safari中使用下拉菜单，但不使用Chrome

我制作了一个下拉菜单，它在safari中运行得非常完美，但是当我在chrome中打开它时，当我将鼠标悬停在链接上时，我看不到下拉菜单。为什么会这样？出于兼容性原因，我显然需要它在两种浏览器中都能工作

*{
框大小：边框框；
}
h1{
字体系列：“Arial”；
字体大小：6vw；
}
h3{
字体系列：Arial；
字体大小：1.7vw；
文本对齐：居中；
}
p{
字体系列：“Arial”；
字体大小：1.7vw；
}
p1{
字体系列：“Arial”；
字体大小：3vw；
}
.标题{
背景色：白烟；
填充：20px；
文本对齐：居中；
}
身体{
保证金：0；
背景：白烟；
字体系列：“Arial”；
字体大小：300；
字体大小：100%；
}
.主导航{
显示器：flex；
}
.主导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
位置：粘性；
位置：-webkit-粘性；
背景色：#DF744A；
排名：0；
宽度：100%；
}
主导航李先生{
浮动：左；
}
.主导航李a，
.下拉列表{
显示：块；
填料：1.2米2.2米；
文字装饰：无；
颜色：黑色；
文本对齐：居中；
字体系列：“Arial”；
字体大小：1.2vw；
}
.主导航李a：悬停{
背景色：#FFAE89；
}
李安产品{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#DF744A；
最小宽度：8vw；
z指数：1；
}
.下拉内容a{
颜色：黑色；
文字装饰：无；
显示：块；
文本对齐：居中；
}
.产品：悬停.下拉内容{
显示：块；
}
.主体{
显示器：flex；
柔性包装：包装；
}
.最新情况{
弹性：20%；
背景色：#FEDCD2；
}
.第1节{
弹性：80%；
背景色：白烟；
显示器：flex；
}
.页脚{
填充：20px；
文本对齐：居中；
背景#bfd8d2；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.主体{
弯曲方向：立柱；
}
}
.乐队{
弹性：50%；
填充：1em；
}

Elle和Belle设计
定制手工头带和配件








更新
页脚

几点：

.main nav ul

有

溢出：隐藏的
正在隐藏
。下拉内容
溢出
ul

li.产品

缺失

位置：相对

这将停止您的

。下拉内容

位置：绝对

跨越整个浏览器宽度

.dropdown content

我添加了

left:0

和

right:0

，因此它使用

位置：relative

（

li.products

）父项的宽度 我已经在下面的代码片段中更新了您的代码

*{
框大小：边框框；
}
h1{
字体系列：“Arial”；
字体大小：6vw；
}
h3{
字体系列：Arial；
字体大小：1.7vw；
文本对齐：居中；
}
p{
字体系列：“Arial”；
字体大小：1.7vw；
}
p1{
字体系列：“Arial”；
字体大小：3vw；
}
.标题{
背景色：白烟；
填充：20px；
文本对齐：居中；
}
身体{
保证金：0；
背景：白烟；
字体系列：“Arial”；
字体大小：300；
字体大小：100%；
}
.主导航{
显示器：flex；
}
/*这有溢出：隐藏*/
.主导航ul{
列表样式类型：无；
保证金：0；
填充：0；
位置：粘性；
位置：-webkit-粘性；
背景色：#DF744A；
排名：0；
宽度：100%；
}
主导航李先生{
浮动：左；
}
.主导航李a，
.下拉列表{
显示：块；
填料：1.2米2.2米；
文字装饰：无；
颜色：黑色；
文本对齐：居中；
字体系列：“Arial”；
字体大小：1.2vw；
}
.主导航李a：悬停{
背景色：#FFAE89；
}
/*要求职位：相对*/
李安产品{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
左：0；
右：0；
背景色：#DF744A；
最小宽度：8vw；
z指数：5；
}
.下拉内容a{
颜色：黑色；
文字装饰：无；
显示：块；
文本对齐：居中；
}
.产品：悬停.下拉内容{
显示：块；
}
.主体{
显示器：flex；
柔性包装：包装；
}
.最新情况{
弹性：20%；
背景色：#FEDCD2；
}
.第1节{
弹性：80%；
背景色：白烟；
显示器：flex；
}
.页脚{
填充：20px；
文本对齐：居中；
背景#bfd8d2；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.主体{
弯曲方向：立柱；
}
}
.乐队{
弹性：50%；
填充：1em；
}

Elle和Belle设计
定制手工头带和配件








更新
页脚

第一个问题是，主导航隐藏任何在其边界之外流动的内容，更改为：

.main-nav ul {
  overflow: visible;
}

其次，要捕捉到的菜单项需要设置相对位置，这会告诉任何具有绝对位置的子菜单项其引用容器应该是什么

li.products {
  position: relative;
}

最后设置下拉列表位置坐标

.products:hover .dropdown-content {
    top: 100%;
    left: 0;
    position: absolute;
}

这是我的新代码。我已经为每个li添加了底部边框，用户悬停时可以看到。但是，我希望它与导航栏的底部对齐，而不是直接在文本下方

我刚刚估计了1.2vw的高度，所以它看起来恰到好处，然而，它并不精确，我只是想知道是否有一种更精确的方法，而不是权宜之计

谢谢

---

Mary

旁注，你有一个

元素嗨，只是出于好奇，p1元素有什么问题吗？首先，没有这样的东西。有

也有

但没有

如果我没有对p元素进行编号，我将如何在p元素上使用不同的样式？您可以为它们提供唯一的ID。或一个或多个

.main-nav {
    display: flex;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 0.9;
    height: 5vw;
    width: 100%;
}

.main-nav ul {
    list-style-type: none;
    margin: 0 0 0 20vw;
    padding: 0;
    overflow: visible;
    top: 0;
    width: 100%;
    height: 5vw;
}

.main-nav ul li {
    display: inline-block;
    text-align: center;
    margin-left: 2vw;
    height: 5vw;
}

.main-nav li {
    float: left;
    height: 5vw;
}

.logoimg {
    height: 5vw;
    width: auto;
    float: left;
    position: fixed;
    margin-left: 1vw;
    z-index: 1;
}

.main-nav li a, .dropdown {
    display: block;
    padding: 1.2em 2.2em;
    text-decoration: none;
    color: whitesmoke;
    text-align: center;
    font-family: 'tenderness';
    font-size: 1.5vw;
    height: 5vw;
    border-bottom: 0.3vw solid transparent;
}

.main-nav li a:after {
    display: block;
    content: '';
    border-bottom: 0.3vw solid whitesmoke;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    min-width: 6vw;
    height: 1.15vw;
}

.main-nav li a:hover:after {
    height: 1.15vw;
    transform: scaleX(1); 
}


li.products {
    display: inline-block;
    position: relative;
    height: 5vw;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.35);
    min-width: 8vw;
    z-index: 1;
    left: 0;
    right: 0;
}

.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block;
    text-align: center;
    height: 5vw;
}

.products:hover .dropdown-content {
    display: block;
}