Comment concevoir la liste avec sous-liste et sous-liste doit être affichée au survol de la liste parent

CSS pur

Utilisez : survolez pour modifier l'affichage de .records pour bloquer lorsque vous survolez les lignes d'affichage.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <li>Add Rows</li>
  <li>DeleteRows</li>
  <li class="view">View Rows
    <ul class="records">
      <li>View New Records</li>
      <li>View Old Records</li>
    </ul>
  </li>
</div>

$(".records").hide();

$(".view").hover(function() {
  $(".records").show();
});

$(".view").mouseout(function() {
  $(".records").hide();
});

Pur Javascript

Et comme toujours, il existe plusieurs façons de le faire. Vous pouvez utiliser du javascript pur comme ci-dessous. Cela utilise .querySelectorAll () pour sélectionner les éléments, .addEventListener ( ) pour faire quelque chose sur mouseover et mouseleave code> . Évidemment, c'est beaucoup plus compliqué et plus difficile que la méthode précédente, mais cela laisse de la place pour beaucoup plus de personnalisation.

<div>
  <li>Add Rows</li>
  <li>DeleteRows</li>
  <li class="view">View Rows
    <ul class="records">
      <li>View New Records</li>
      <li>View Old Records</li>
    </ul>
  </li>
</div>

.records {
  display: none;
}

var records = document.querySelectorAll(".records");
var view = document.querySelectorAll(".view")[0];

view.addEventListener("mouseover", function() {
  records.forEach(e => {
    e.style.display = "block";
  });
});

view.addEventListener("mouseleave", function() {
  records.forEach(e => {
    e.style.display = "none";
  });
});

Et bien sûr, il y a une méthode jQuery. Cela utilise .hover () pour détecter lorsque vous survolez le texte. , puis vous utilisez .show () pour afficher le li. Ensuite, vous utilisez .mouseout () pour détecter lorsque vous sortez de le texte et .hide () pour masquer le texte. p>

<div>
  <li>Add Rows</li>
  <li>DeleteRows</li>
  <li class="view">View Rows
    <ul class="records">
      <li>View New Records</li>
      <li>View Old Records</li>
    </ul>
  </li>
</div>

.records {
  display: none;
}

.view:hover .records {
  display: block;
}

Vous pouvez utiliser dans un premier temps ul visibilité cachée et li: hover ul visibilité: visible à affichée au survol de la liste parente.

<div>
     <li>Add Rows</li>
     <li>DeleteRows</li>
     <li>View Rows
       <ul>
         <li>View New Records</li>
         <li>View Old Records</li>
       </ul>
     </li>
    </div>

li:hover ul {
   visibility: visible;
} 

ul {
   visibility: hidden;
} 

voir l'exemple de js fiddle ici

<div>
    <ul>
       <li>Add Rows</li>
       <li>DeleteRows</li>
       <li>View Rows
         <ul>
           <li>View New Records</li>
           <li>View Old Records</li>
         </ul>
       </li>
    </ul>
</div>

ul {
  background: #333;
}

ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  color: white;
}

ul ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  padding-left: 0;
}

ul li:hover ul {
  display: block;
}

ul ul li {
  display: block;
  width: 100%;
}