HTML CSS .dropdown:hover 麻烦

Question

当我向下滚动页面时，header 正在移动。我给它添加了几个按钮，它们也随之移动。我的问题是，当我没有将鼠标悬停在按钮上时，我的 drop-button 正在显示其内容。

我的代码：

/*------------------------------------dropdown menu start*/
.dropbtn {
    background-color: #B9B9B9;
    color: white;
    font-size: 30px;
    font-weight:bold;
    border: none;
    cursor: pointer;
    position: relative;
    left: 300px;
    top: -18px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 300px;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 18px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ffffff}

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

.dropdown:hover .dropbtn {
    color: #4d4d4d;
}
/*------------------------------------dropdown menu end*/

还有一张图片（黑点是鼠标位置）：

我该怎么做才能解决这个问题？

Answer 1

这是一个CodePen Example

根据您的 CSS

，您的 HTML 应该有一个与此类似的标记

<div class="navbar">
    <div class="navItem"><a href="yourTarget">Home</a></div>
    <div class="navItem product-dropdown">
         <span>Products</span>
         <div class="dropdown-content">
              <ul>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
              </ul>
         </div>
    </div>
</div>

然后至于样式类似于此：

.dropdown-content{
    display:none;
}

.product-dropdown:hover .dropdown-content {
    display: block;
}
.navItem {
    float: left;
    padding: 10px;
 }
 li {
     list-style-type: none;
 }

Answer 2

你的问题运行很深。我什至真的不想修复整个菜单，因为我基本上是从头开始写一个，你可以自己做，但我要做的是指出一些问题来帮助你找到你的方法：

你的设计核心：

<div class="header-cont">
  <div class="header">
    <img src="">
      <logotext>MyCompanyName</logotext>
      <button>Home</button>
      <div class="dropdown">
        <button class="dropbtn">Products</button>
        <div class="dropdown-content">
          <a href="#">Product 1</a>
          <a href="#">Product 2</a>
          <a href="#">Product 3</a>
        </div>
      </div>
      <button>Locations</button>
      <button>Contacts</button>
      <button>History</button>
      <div class="dropdown">
        <button class="dropbtn">Language</button>
        <div class="dropdown-content">
          <a href="#">Language 1</a>
          <a href="#">Language 2</a>
        </div>
      </div>
   </div>
</div>

这里有很多我永远不会做的事情：

<logotext> 不是有效的 HTML 标记。您可能想要一个 <span class="logotext"> 或类似的东西。
您的导航菜单由 <div> 和 <button> 以及其他 <div> 和 <a> 标签组成。这是组织菜单的一种奇怪且令人困惑的方式。您应该考虑使用 <ul> 标签并使用 <li> 来订购您的子菜单。
您直接运行遇到的问题是由于您的主页 <button> 元素带有 left: 300px 而您的 <div class="dropdown"> 没有没有。

一种更简单、更合乎逻辑的导航菜单组织方式：

<ul id='menu'>
   <li><a href='#'>Planets</a>
     <ul>
         <li><a href='#'>Mercury</a></li>
         <li><a href='#'>Venus</a></li>
         <li><a href='#'>Earth</a></li>
     </ul>
   </li>
   <li><a href='#'>Stars</a>
     <ul>
         <li><a href='#'>Sun </a></li>
         <li><a href='#'>Betelgeuse</a></li>
         <li><a href='#'>Bellatrix</a></li>
     </ul>
   </li>
   <li><a href='#'>Galaxies</a>
     <ul>
         <li><a href='#'>Milky Way </a></li>
         <li><a href='#'>Andromeda</a></li>
         <li><a href='#'>Antennae</a></li>
     </ul>
   </li>
</ul>

我刚从 google 那里得到这个，这是它的 JSFiddle。

HTML CSS .dropdown:hover 麻烦

HTML CSS .dropdown:hover trouble

html

css

dropdown