二、下拉菜单

<div class="box" id="box">
    <h3 id="tit">购物</h3>
    <ul class="list" id="list"> 
        <li><a href="">服装</a></li>
        <li><a href="">家电</a></li>
        <li><a href="">饰品</a></li>
        <li><a href="">饰品</a></li>
        <li><a href="">饰品</a></li>
        <li><a href="">饰品</a></li>
    </ul>
</div>

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #333;
    }
    .box {
        /* 盒子属性 */
        width: 100px;
        /* 高度省略不写，由内容撑开 */
        border: 1px solid #000;
        /* 块级元素水平居中 */
        margin: 50px auto;
    }
    .box h3 {
        height: 50px;
        line-height: 50px;
        /* padding挤出背景图位置 */
        padding-left: 50px;
        background: url(images/focus_up_b.png)no-repeat 10px center;
    }
    .box ul li {
        height: 40px;
        line-height: 40px;
    }
    .box ul li a {
        display: block;
        height: 50px;
        text-align: center;
    }
    .box ul.list {
        display: none;
    }
</style>

<script>
    // 让JS晚加载
    window.onload = function(){
    // 获取元素对象
    var oBox = document.getElementById("box");
    var oTit = document.getElementById("tit");
    var oList = document.getElementById("list");
    // 鼠标进入box，图片更改，list出现
    oBox.onmouseenter = function(){
        // 图片更改
        oTit.style.backgroundImage = "url(images/focus_down_b.png)";
        // list出现
        oList.style.display = "block";
    }
    // 鼠标离开box，图片更改，list出现
    oBox.onmouseleave = function () {
        // 图片更改
        oTit.style.backgroundImage = "url(images/focus_up_b.png)";
        // list隐藏
        oList.style.display = "none";
    }
    }
</script>