HTML Element Style How to - Hover to show link

Question

We would like to know how to hover to show link.

Answer


<!DOCTYPE html>
<html>
<head>
<style>
#map li {<!--   w  w  w .j  av  a  2 s  . c o m-->
  width: 30px;
  height: 30px;
  border: 2px solid #EEE;
}

#map li a {
  display: none;
}

#map li:hover a {
  display: block;
  left: 50px;
}
</style>
</head>
<body>
  <ul>
    <li><a href="Homepage">Logo</a>
      <ul id="map">
        <li><a href="">North</a></li>
        <li><a href="">West</a></li>
        <li><a href="">East</a></li>
        <li><a href="">South</a></li>
      </ul>
    </li>
  </ul>
  <script>
</script>
</body>
</html>

The code above is rendered as follows: