hover box with header #css

by benroe

HTML

<div class="items">
<ul>
                <li>
                    <h4>January</h4>
                    <ul>
                        <li><a href="http://theindustry.cc/2012/01/09/a-look-at-lettercase-app-by-micah-rich/">A Look at Lettercase App by Micah Rich</a></li>
                        <li><a href="http://theindustry.cc/2012/01/23/an-interview-with-miguel-endara-of-hero/">An Interview with Miguel Endara: The Artist Behind the Viral ‘Hero’ Video </a></li>
                        <li><a href="http://theindustry.cc/2012/01/12/an-interview-with-james-mcdonald-uiux-designer-from-scotland/">An Interview With James McDonald: UI/UX Designer from Scotland</a></li>
                        <li><a href="http://theindustry.cc/2012/01/30/a-sneak-peak-at-adobe-photoshop-cs6-and-upgrade-offerings-for-cs3-and-cs4-users/">A Sneak Peek at Adobe Photoshop CS6 and Upgrade Offerings for CS3 and CS4 users</a></li>
                        <li><a href="http://theindustry.cc/2012/01/16/rogie-kings-fine-goods-market-launches/">Rogie King’s Fine Goods Market Launches</a></li>
                    </ul>
                </li>
</ul>

CSS

a {
    outline:medium none;
    text-decoration:none;
    transition-duration:0.2s;
    transition-property:color;
}

.items > ul > li ul a {
    color:#2F8CCD;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.items > ul > li ul a:hover {
    color:#236797;
}

.items > ul > li {
    border:1px solid #C5CAD9;
    border-radius:4px 4px 4px 4px;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.1);
    display:inline-block;
    font-family:"centrale_sans_cnd_bold_itBdIt","Helvetica",sans-serif;
    margin:10px;
    transition-duration:0.2s;
    transition-property:margin-top, box-shadow;
    vertical-align:middle;
    width:320px;
}
.items > ul > li:hover {
    box-shadow:0 5px 6px rgba(0, 0, 0, 0.05);
    margin-top:5px;
}

.items > ul > li h4 {
    color:#2E3340;
    font-size:30px;
    padding:12px 20px;
    text-align:left;
}

.items > ul > li ul {
    background-color:#F8F8F9;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    border-top:1px solid #D7D7DD;
    font-size:12px;
    padding:22px 20px;
    text-align:left;
}
.items > ul > li ul li {
    margin-bottom:20px;
}

.items > ul > li ul a {
    color:#2F8CCD;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}