[Edit]

CSS - expanding list on hover

1 contributors

2 contributions

0 discussions

0 points

Created by:

Jan-Alfaro

681

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:

xxxxxxxxxx
 
<!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>