HTML Element Style How to - Create Nested list hover row

Question

We would like to know how to create Nested list hover row.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from   ww  w . j ava  2s .  c o  m-->
  list-style: none;
  padding: 0;
}

ul li {
  background-color: #EEE;
  padding: 10px;
  border: 1px dashed #AAA;
}

ul.hover li:hover {
  background-color: rgba(140, 191, 38, 0.3);
}
</style>
</head>
<body>
  <ul>
    <li>
      <ul>
        <li>
          <ul class="hover">
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </li>
        <li>
          <ul class="hover">
            <li></li>
            <li></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>

The code above is rendered as follows: