Question

我试图创建一个子菜单，当我将鼠标悬停在菜单上时（例如电子设备）。我这样做了，但是只要我将鼠标悬停在下一个元素上（这里下一个元素是电子菜单旁边的另一个名为家用电器的菜单），电子菜单的子菜单就会出现。有人知道如何解决吗？

此处的HTML代码：

<div class="header_wrapper">
  <a href="index.php"><img src="images/1.jpg"></a>
</div>

<div class="search">
  <form method="get" action="search.php">
    <input type="text" name="search" placeholder="Search...">
    <button type="submit">Submit</button>
  </form>
</div>

<div class="account">
  <a href="signup.php">SignUp</a>
  <a href="signin.php">SignIn</a>
  <a href="my_account.php">My Account</a>
  <a href="cart.php">Cart</a>
  <a href="track_order.php">Track Order</a>
</div>

<div class="cat_electronics">
  <elec>Elecronics</elec>
    <div class="elec">
      <a>Mobiles<i class="fas fa-caret-down"></i></a>
      <a>Mi</a>
      <a>Realme</a>
      <a>Samsung</a>
      <a>Sony</a>
      <a>Infinix</a>
      <a>Oppo</a>
      <a>Vivo</a>
      <a>Nokia</a>
      <a>Motorola</a>
      <a>Apple</a>
      <a>Lenovo</a>
      <a>honor</a>
      <a>Asus</a>
      <a>Google Pixel</a>
    </div>

    <div class="elec1">
      <a>Mobile Accessories<i class="fas fa-caret-down"></i></a>
      <a>Mobile Cases</a>
      <a>Headphones & Headsets</a>
      <a>Power Banks</a>
      <a>Screenguards</a>
      <a>Memory Cards</a>
      <a>Memory Cards</a>
      <a>Memory Cards</a>
      <a>Smart Headphones</a>
      <a>Mobile Cables</a>
      <a>Mobile Chargers</a>
      <a>Mobile Holders</a>
    </div>

    <div class="elec2">
      <a>Laptops<i class="fas fa-caret-down"></i></a>
      <a>Gaming Laptops</a>
      <a>Office-Work Laptops</a>
      <a>Mid-Range Laptops</a>
    </div>

    <div class="elec3">
      <a>Desktop PCs<i class="fas fa-caret-down"></i></a>
      <a>Gaming PCs</a>
      <a>Office PCs</a>
      <a>Workstation PCs</a>
      <a>Budget PCs</a>
    </div>
</div>

<div class="cat_home_appliances">
  <elec>Home Appliances</elec>
    <div class="home1">
      <a></a>
      <a></a>
      <a></a>
    </div>
</div>

此处的CSS代码：

        body{
  margin: 0;
  font-family: sans-serif;
  box-sizing: border-box;
  }

  .header_wrapper{
  padding: 10px;
  border-bottom: 2px solid grey;
  }

  .header_wrapper img{
  padding-left: 50px;

  }

  .search {
  margin-left: 250px;
  margin-top: -110px;
  }

  .search input[type=text]{
  padding: 7px;
  font-size: 17px;
  width: 30%;
  border-bottom: 2px solid grey;
  }

  .search button{
  font-size: 17px;
  text-align: center;
  padding: 6px;
  margin-left: -3px;
  border-bottom: 2px solid grey;
  background: white;
  }

  .search button:hover,input[type=text]:hover{
  color: orangered;
  font-weight: bolder;
  background: #f2f2f2;
  }

  .account{
  float: right;
  margin-right: 100px;
  margin-top: -28px;
  }

  .account a{
  text-decoration: none;
  color: black;
  text-align: center;
  padding: 7px;
  background: white;
  }

  .account a:hover{
  color: orangered;
  font-weight: bolder;
  border: 5px solid grey;
  padding: 5px;
  background: #f2f2f2;
  }

  .cat_electronics{
  margin-left: 250px;
  margin-top: 30px;
  position: absolute;
  }

  .cat_electronics elec:hover{
  color: orangered;
  border: 2px solid grey;
  cursor: pointer;
  }

  .elec{
  margin-top: 21px;
  display: none;
  border: 2px solid white;
  width: 100%;
  font-size: 15px;
  }

  .elec a{
  padding: 5px;
  display: block;
  border-left: 1px;
  border-right: 1px;
  border-style: solid;
  border-color: white;
  box-shadow: 0px 1px 2px #888888;
  }

  .elec a:hover,.elec1 a:hover,.elec2 a:hover{
  color: orangered;
  }

  .cat_electronics:hover .elec{
  display: block;
  }

  .cat_home_appliances{
  margin-left: 350px;
  margin-top: 30px;
  }

  .elec1{
  margin-top: -497px;
  margin-left: 100px;
  font-size: 15px;
  }

  .elec1 a,.elec2 a,.elec3 a{
  padding: 8px;
  display: block;
  }

  .elec2{
  margin-top: -395px;
  margin-left: 300px;
  font-size: 15px;
  }

  .elec3{
  margin-left: 300px;
  font-size: 15px;
  }

Answer 1

看起来您将定位目标定位为“ elec”而不是“ home1”，

a.__class__.__dict__['data'].get_membervalues()
>>> {'name': 'data', 'cls_name': 'AnotherClass', 'tooltip': 'help'}

Answer 2

这应该让您开始正确的轨道，我剥去了CSS（这样您就可以看到发生了什么）更改为选择一个按钮，并在elec1-elec3周围添加了包装器

希望这会有所帮助

.cat_electronics, .cat_home_appliances {
  display: inline-block;
  padding: 1rem;
}

.elect-container, .home1 {
  display: none;
  position: absolute;
}

.cat_electronics:hover > .elect-container {
  display: block;
}

.cat_home_appliances:hover > .home1 {
  display: block;
}

<div class="header_wrapper">
  <a href="index.php"><img src="images/1.jpg"></a>
</div>

<div class="search">
  <form method="get" action="search.php">
    <input type="text" name="search" placeholder="Search...">
    <button type="submit">Submit</button>
  </form>
</div>

<div class="account">
  <a href="signup.php">SignUp</a>
  <a href="signin.php">SignIn</a>
  <a href="my_account.php">My Account</a>
  <a href="cart.php">Cart</a>
  <a href="track_order.php">Track Order</a>
</div>

<div class="cat_electronics">
  <button>Elecronics</button>
    <div class="elect-container">
      <div class="elec">
        <a>Mobiles<i class="fas fa-caret-down"></i></a>
        <a>Mi</a>
        <a>Realme</a>
        <a>Samsung</a>
        <a>Sony</a>
        <a>Infinix</a>
        <a>Oppo</a>
        <a>Vivo</a>
        <a>Nokia</a>
        <a>Motorola</a>
        <a>Apple</a>
        <a>Lenovo</a>
        <a>honor</a>
        <a>Asus</a>
        <a>Google Pixel</a>
      </div>

      <div class="elec1">
        <a>Mobile Accessories<i class="fas fa-caret-down"></i></a>
        <a>Mobile Cases</a>
        <a>Headphones & Headsets</a>
        <a>Power Banks</a>
        <a>Screenguards</a>
        <a>Memory Cards</a>
        <a>Memory Cards</a>
        <a>Memory Cards</a>
        <a>Smart Headphones</a>
        <a>Mobile Cables</a>
        <a>Mobile Chargers</a>
        <a>Mobile Holders</a>
      </div>

      <div class="elec2">
        <a>Laptops<i class="fas fa-caret-down"></i></a>
        <a>Gaming Laptops</a>
        <a>Office-Work Laptops</a>
        <a>Mid-Range Laptops</a>
      </div>

      <div class="elec3">
        <a>Desktop PCs<i class="fas fa-caret-down"></i></a>
        <a>Gaming PCs</a>
        <a>Office PCs</a>
        <a>Workstation PCs</a>
        <a>Budget PCs</a>
      </div>
    </div>
</div>

<div class="cat_home_appliances">
  <button>Home Appliances</button>
    <div class="home1">
      <a>one</a>
      <a>two</a>
      <a>three</a>
  </div>
</div>

如我之前在评论中所述，您的cat_electronics div设置为绝对位置。创建悬停式下拉菜单时，“按钮”本身应该是静态的，显示和隐藏的菜单应该是绝对位置。另一个问题是，您没有隐藏.elec以外的任何子类别，而没有显示任何内容，您只是使用负边距将它们滑开了，所以elec1实际上仍然存在，并且与家用电器的“按钮”重叠，因此您拥有您的悬停设置（意味着在您悬停按钮或任何子类别时显示块，无论何时尝试悬停家用电器）都会使其显示，因为从技术上讲，您正在悬停elec1，这会导致菜单显示，因为它是cat_electronics的子类。（请参见下图）我希望这很有意义，并希望它在创建将来的下拉菜单时为您提供帮助

当我通过另一个下拉菜单悬停时，出现下拉菜单的子菜单

2 个答案: