JS練習--嵌套列表（for循環）

CSS:

*{padding: 0;margin: 0;}
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: 1;
}
.active li{
    color: #e4007e; 
    font-size: 14px;
    padding-left: 12px;
    height: 30px;
    line-height: 30px;
}

/* 清除浮動 */
.clearfix{
    zoom: 1;
}
.clearfix:after{ 
    content: '.';
    height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

HTML:

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

JS:

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