下拉菜单适用于 Safari 但不适用于 Chrome

Question

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

* {
  box-sizing: border-box;
}

h1 {
  font-family: 'Arial';
  font-size: 6vw;
}

h3 {
  font-family: Arial;
  font-size: 1.7vw;
  text-align: center;
}

p {
  font-family: 'Arial';
  font-size: 1.7vw;
}

p1 {
  font-family: 'Arial';
  font-size: 3vw;
}

.header {
  background-color: whitesmoke;
  padding: 20px;
  text-align: center;
}

body {
  margin: 0;
  background: whitesmoke;
  font-family: 'Arial';
  font-weight: 300;
  font-size: 100%;
}

.main-nav {
  display: flex;
}

.main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: sticky;
  position: -webkit- sticky;
  background-color: #DF744A;
  top: 0;
  width: 100%;
}

.main-nav li {
  float: left;
}

.main-nav li a,
.dropdown {
  display: block;
  padding: 1.2em 2.2em;
  text-decoration: none;
  color: black;
  text-align: center;
  font-family: 'Arial';
  font-size: 1.2vw;
}

.main-nav li a:hover {
  background-color: #FFAE89;
}

li.products {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #DF744A;
  min-width: 8vw;
  z-index: 1;
}

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

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

.mainbody {
  display: flex;
  flex-wrap: wrap;
}

.updates {
  flex: 20%;
  background-color: #FEDCD2;
}

.section-1 {
  flex: 80%;
  background-color: whitesmoke;
  display: flex;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #bfd8d2;
}

@media screen and (max-width: 600px) {
  .main-body {
    flex-direction: column;
  }
}

.bands {
  flex: 50%;
  padding: 1em;
}

<div class="header">
  <h1>Elle and Belle Design</h1>
  <p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li class="products">
      <a href="products.html" class="dropdown">Products</a>
      <div class="dropdown-content">
        <a href="headbands.html">Headbands</a>
        <a href="earrings.html">Earrings</a>
        <a href="Other.html">Other</a>
      </div>
    </li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</nav>

<div class="mainbody">

  <div class="updates">
    <h3>Updates</h3>
  </div>

  <div class="section-1">
    <div class="bands">
      <img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
      <img src="goldband.jpg" alt="Gold Band" width="330" height="400">
    </div>
  </div>

</div>

<div class="footer">
  <h2>Footer</h2>
</div>

Answer 1

几点：

1. .main-nav ul 有 overflow: hidden 隐藏 .dropdown-content 溢出 ul。
2. li.products 丢失了 position: relative 这会阻止您的 .dropdown-content position: absolute 跨越整个浏览器宽度。
3. .dropdown-content 我添加了left: 0 和right: 0 所以它使用position: relative (li.products) 父级的宽度。

我在下面的 sn-p 中更新了您的代码。

* {
  box-sizing: border-box;
}

h1 {
  font-family: 'Arial';
  font-size: 6vw;
}

h3 {
  font-family: Arial;
  font-size: 1.7vw;
  text-align: center;
}

p {
  font-family: 'Arial';
  font-size: 1.7vw;
}

p1 {
  font-family: 'Arial';
  font-size: 3vw;
}

.header {
  background-color: whitesmoke;
  padding: 20px;
  text-align: center;
}

body {
  margin: 0;
  background: whitesmoke;
  font-family: 'Arial';
  font-weight: 300;
  font-size: 100%;
}

.main-nav {
  display: flex;
}


/* This had overflow: hidden; */

.main-nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: sticky;
  position: -webkit- sticky;
  background-color: #DF744A;
  top: 0;
  width: 100%;
}

.main-nav li {
  float: left;
}

.main-nav li a,
.dropdown {
  display: block;
  padding: 1.2em 2.2em;
  text-decoration: none;
  color: black;
  text-align: center;
  font-family: 'Arial';
  font-size: 1.2vw;
}

.main-nav li a:hover {
  background-color: #FFAE89;
}


/* Requires position: relative;*/

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

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #DF744A;
  min-width: 8vw;
  z-index: 5;
}

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

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

.mainbody {
  display: flex;
  flex-wrap: wrap;
}

.updates {
  flex: 20%;
  background-color: #FEDCD2;
}

.section-1 {
  flex: 80%;
  background-color: whitesmoke;
  display: flex;
}

.footer {
  padding: 20px;
  text-align: center;
  background: #bfd8d2;
}

@media screen and (max-width: 600px) {
  .main-body {
    flex-direction: column;
  }
}

.bands {
  flex: 50%;
  padding: 1em;
}

<div class="header">
  <h1>Elle and Belle Design</h1>
  <p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li class="products">
      <a href="products.html" class="dropdown">Products</a>
      <div class="dropdown-content">
        <a href="headbands.html">Headbands</a>
        <a href="earrings.html">Earrings</a>
        <a href="Other.html">Other</a>
      </div>
    </li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</nav>

<div class="mainbody">
  <div class="updates">
    <h3>Updates</h3>
  </div>

  <div class="section-1">
    <div class="bands">
      <img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
      <img src="goldband.jpg" alt="Gold Band" width="330" height="400">
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

Answer 2

第一个问题是主导航隐藏了任何超出其边界的内容更改为：

.main-nav ul {
  overflow: visible;
}

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

li.products {
  position: relative;
}

最后设置下拉菜单的位置坐标

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

Answer 3

.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;
}

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

我刚刚输入了 1.2vw 的估计高度，所以它看起来差不多，但是，它并不准确，我只是想知道是否有更精确且不那么临时的方法来做到这一点？

谢谢 玛丽