html tutorial - How to show and hide dropdown menu on mouse hover using CSS - html5 - html code - html form



Answer: Use the CSS :hover pseudo-class

    If you simply need to indicate and hide dropdown menu on mouse hover you do not want any JavaScript. you'll do that simply using the CSS show property and :hover pseudo-class

    The following example can show you ways to implement an easy dropdown using the CSS.

    Example

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>Show Hide Dropdown Using CSS</title>
      <style type="text/css">
          ul{
              padding: 0;
              list-style: none;
              background: #f2f2f2;
          }
          ul li{
              display: inline-block;
              position: relative;
              line-height: 21px;
              text-align: left;
          }
          ul li a{
              display: block;
              padding: 8px 25px;
              color: #333;
              text-decoration: none;
          }
          ul li a:hover{
              color: #fff;
              background: #939393;
          }
          ul li ul.dropdown{
              min-width: 100%; /* Set width of the dropdown */
              background: #f2f2f2;
              display: none;
              position: absolute;
              z-index: 999;
              left: 0;
          }
          ul li:hover ul.dropdown{
              display: block; /* Display the dropdown */
          }
          ul li ul.dropdown li{
              display: block;
          }
      </style>
      </head>
      <body>
          <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li>
                  <a href="#">Products ▾</a>
                  <ul class="dropdown">
                      <li><a href="#">Laptops</a></li>
                      <li><a href="#">Keyboards</a></li>
                      <li><a href="#">Printers</a></li>
                  </ul>
              </li>
              <li><a href="#">Contact</a></li>
          </ul>
      </body>
      </html>

      Related Searches to How to show and hide dropdown menu on mouse hover using CSS