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

时间：2019-09-04 20:35:42

标签： html css

我创建了一个下拉菜单，它在野生动物园中非常有效，但是当我在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>

3 个答案:

答案 0 :(得分：2)

几点：

  1. .main-nav ul的{​​{1}}隐藏了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）父级的宽度。

我已经在下面的代码段中更新了您的代码。 

* {
  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>

答案 1 :(得分：1)

第一个问题是main-nav隐藏了任何超出其边界范围的内容，更改为：

.main-nav ul {
  overflow: visible;
}

第二个是要捕捉到的菜单项需要设置相对位置，这会告诉所有具有绝对位置的子项其参考容器应为

li.products {
  position: relative;
}

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

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

答案 2 :(得分：0)

.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，所以看起来差不多正确，但是，这不是精确的，我只是想知道是否有更精确且不是那么临时的方法？

谢谢 玛丽

相关问题
最新问题