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

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

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