I made a dropdown menu and it works perfect in safari, however when I open it up in chrome i can't see the dropdown when I hover over the link. Why is this? I obviously need it to work in both browsers for compatibility reasons. 

```css
* {
  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;
}
```

```html
<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>
```