Q:

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 anyway 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...

A:

<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; 
}

