Page Widget How to - Hover Mouse to show submenu

Question

We would like to know how to hover Mouse to show submenu.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.sousMenu:hover ul {<!--   w w  w .  j  ava2 s  .co  m-->
  display: inherit;
}

.sousMenu ul {
  top: 40px;
  display: none;
  list-style-type: none;
}
</style>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="">A</a></li>
      <li class="sousMenu">Hover me to see the submenu
        <ul>
          <li><a href="">Submenu A</a></li>
          <li><a href="">Submenu B</a></li>
        </ul>
      </li>
      <li><a href="">B</a></li>
      <li><a href="">C</a></li>
    </ul>
  </div>
</body>
</html>

The code above is rendered as follows: