Effect How to - Restore the child element style when hover, target the first level element not the nested li items

Question

We would like to know how to restore the child element style when hover, target the first level element not the nested li items.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul>li:hover {<!--   w w w.ja v a 2 s.  c  o  m-->
  font-weight: bold;
}

ul>li:hover li {
  font-weight: normal;
}
</style>
</head>
<body>
  <ul>
    <li>A
      <ul>
        <li>subection</li>
      </ul>
    </li>
    <li>B
      <ul>
        <li>subection</li>
      </ul>
    </li>
    <li>C
      <ul>
        <li>subection</li>
      </ul>
    </li>
  </ul>
</body>
</html>

The code above is rendered as follows: