HTML Element Style How to - Hover UL li item to show and hide inner UL li items

Question

We would like to know how to hover UL li item to show and hide inner UL li items.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
nav>ul>li {
  clear: left;
  position: relative;
}<!--from  w  w w  . j  a  v a2s  .c o m-->

nav>ul>li ul {
  display: none;
}

nav>ul>li:hover ul {
  display: block;
}

nav>ul>li ul {
  position: absolute;
  left: 100px;
  top: 0;
}

nav>ul>li ul li {
  float: left;
  display: inline-block;
}
</style>
</head>
<body>
  <nav>
    <ul>
      <li>Parent 1
        <ul>
          <li>Child 1</li>
          <li>Child 2</li>
          <li>Child 3</li>
        </ul>
      </li>
      <li>Parent 2
        <ul>
          <li>Child 4</li>
          <li>Child 5</li>
          <li>Child 6</li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

The code above is rendered as follows: