Is it possible to clip an unordered list with a div?

Ok, I've got this:

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Is there anywa开发者_StackOverflow中文版y to setup the div so that it clips the list items? I want to set the div's height to say, 20px, enough to show only the first item in the list... And upon hover, I'll change the height to about 60px, and reveal all the other options...

---

<style>
.clip {
    height:20px;
    overflow:hidden;
}
.clip:hover {
    height: auto;
    overflow: auto;
}
</style>

<div class="clip">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

And for a little transition:

.clip {
     -moz-transition: height 0.3s ease-out;  /* FF4+ */
       -o-transition: height 0.3s ease-out;  /* Opera 10.5+ */
  -webkit-transition: height 0.3s ease-out;  /* Saf3.2+, Chrome */
      -ms-transition: height 0.3s ease-out;  /* IE10? */
          transition: height 0.3s ease-out; 
}

---

It's easy as pie :-) Take a look at this fiddle I've made up for you. The key here is the overflow: hidden property; it will clip content to the set height of the div.

HTML

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

div
{
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    background: #76a7dc;
}

div:hover
{
    height: auto;
    overflow: auto;
}

EDIT on the :hover pseudo-class, I've taken the two properties from @roryf. Thanks for the tip. Basically, this means that if you add more list elements, the element will resize to fit no matter how many you have.

---

You dont need to clip the list elements in a div for your purpose.Just use a javascript framework (ex.jquery) to show/hide li-elements on hover/mouse-out