*{padding:;margin:;}

ul,li{list-style: none;}

.cont{

    width: 600px;

    margin:30px auto;

}

.cont h3{

    border-bottom: 2px solid #bbb;

    width: 100%;

    height: 38px;

}

#ul1{

    position: relative;

    width: 100%;

}

#ul1>li{

    float: left;

    margin-top: 15px;

    margin-left: 15px;

    position: relative;

}

.pro{

    width: 180px;

    height: 200px;

    overflow: hidden;

}

.pro img{

    width: 180px;

    height: 150px;

    overflow: hidden;

}

.pro p{

    text-align: center;

}

.hidden{

    display: none;

}

.active{

    width: 300px;

    height: 120px;

    padding: 10px;

    overflow: hidden;

    position: absolute;

    top: -80px;

    left: 20px;

    display: block;

    background: #eee;

    border: 1px solid #ccc;

    z-index:;

}

.active li{

    color: #e4007e;

    font-size: 14px;

    padding-left: 12px;

    height: 30px;

    line-height: 30px;

}

/* 清除浮动 */

.clearfix{

    zoom:;

}

.clearfix:after{

    content: '.';

    height:;

    display: block;

    clear: both;

    visibility: hidden;

}

<div class="cont">

    <h3>最近更新</h3>

    <ul id="ul1" class="clearfix">

        <li>

            <div class="pro">

                <img src="img/small.jpg">

                <p>开心一刻</p>

                <p>动漫类</p>

            </div>

            <ul class="hidden">

                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>

                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>

                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>

            </ul>

        </li>

        <li>

            <div class="pro">

                <img src="img/small-02.jpg">

                <p>盆景养成记</p>

                <p>植物类</p>

            </div>

            <ul class="hidden">

                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>

                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>

                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>

            </ul>

        </li>

        <li>

            <div class="pro">

                <img src="img/small-03.jpg">

                <p>盆景养成记</p>

                <p>植物类</p>

            </div>

            <ul class="hidden">

                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>

                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>

                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>

            </ul>

        </li>

        <li>

            <div class="pro">

                <img src="img/small-04.jpg">

                <p>插花艺术</p>

                <p>艺术类</p>

            </div>

            <ul class="hidden">

                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>

                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>

                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>

            </ul>

        </li>

        <li>

            <div class="pro">

                <img src="img/small-05.jpg">

                <p>插花艺术</p>

                <p>艺术类</p>

            </div>

            <ul class="hidden">

                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>

                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>

                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>

            </ul>

        </li>

        <li>

            <div class="pro">

                <img src="img/small-06.jpg">

                <p>开心一刻</p>

                <p>动漫类</p>

            </div>

            <ul class="hidden">

                <li>开不厌“坐不凡” 宝马全新730Li试驾快评</li>

                <li>3D打印无法替代 汽车设计师如何玩泥巴？</li>

                <li>比亚迪元换装个性LOGO 瞬间高大上了许多</li>

            </ul>

        </li>

    </ul>

</div>

<script type="text/javascript">

    var oUl1=document.getElementById('ul1');

    var aUl=oUl1.getElementsByTagName('ul');//ul数组

    var aDiv=oUl1.getElementsByTagName('div');

    for (var i = 0; i < aDiv.length; i++) {

        aDiv[i].index=i;//索引值

        //鼠标经过当前div时，当前li下的div内容显示

        aDiv[i].onmouseover=function(){

            aUl[this.index].className='active';

        }

        //鼠标离开当前div时，当前li下的div内容隐藏

        aDiv[i].onmouseout=function(){

            aUl[this.index].className='hidden';

        }

    };

</script>