Languages
[Edit]
EN

CSS - expanding list on hover

0 points
Created by:
Jan-Alfaro
341

In this article, we would like to show you how to create an expanding list on hover using CSS.

Below we create an expanding list, that expands on hover adjusting the height to the number of elements in the list.

Runnable example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>

      .menu .list {
        max-height: 0;     /*  height at the start            */
        overflow: hidden;  /*  required to hide li elements   */
        transition: 1s;    /*  works both ways                */
      }

      .menu:hover .list {
        max-height: 300px; /*  max height when expanded  */
      }

    </style>
  </head>
  <body style="height: 120px">
    <div class="menu">
      Hover to expand the list:
      <ul class="list">
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>
  </body>
</html>

References

  1. :hover - CSS | MDN
  2. transition - CSS | MDN
  3. Pseudo-classes - CSS | MDN
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join