HTML Element Style How to - Hover targeting the first level element not the nested li items

Question

We would like to know how to hover targeting the first level element not the nested li items.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul>li:hover {<!--   w w  w.  j  a v  a2s .  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: