想做成图片那样的样式，但是运行的不对


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ul1 li{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left;
            border: 1px solid lightblue;
            background: yellowgreen;
            position: relative;
        }
        #ul1 li:hover{
            background: palegoldenrod;
        }
        .son{
            display: none;
        }
        .gs{
            display: none;
            position: absolute;
            left: 100px;
            top: -1px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oul = document.getElementById("ul1");
            var ai=document.getElementsByTagName("li");
            var timer = null;
            for(var i = 0;i<ai.length;i++){
                ai[i].onmouseover = function(){
                    clearTimeout(this.timer);
                    var that = this;
                    this.timer = setTimeout(function(){
                    var ol = that.getElementsByTagName('ul')[0];
                    if(ol){
                        ol.style.display = 'block';
                    }
                 },300)
               }
               ai[i].onmouseout = function(){
                   clearTimeout(this.timer);
                   var that = this;
                   this.timer = setTimeout(function(){
                   var ol = that.getElementsByTagName('ul')[0];
                   if(ol){
                       ol.style.display = 'none';
                        }
                    },300)
                }
            }
        }
    </script>
    <body>
        <ul id="ul1">
            <li>首页</li>
            <li>
                <span>公司简介</span>
                <ul class="dsj">
                    <li>大事记</li>
                    <li>
                        <span>领导致辞</span>
                        <ul id="gs">
                            <li>
                                <span>2013年</span>
                                <ul class="gs">
                                    <li>10月份</li>
                                    <li>9月份</li>
                                    <li>8月份</li>
                                </ul>
                            </li>
                            <li>企业文化</li>
                        </ul>
                    </li>
                    <li>联系我们</li>
                    <li>
                        <span>产品展示</span>
                        <ul class="son">
                            <li>康师傅</li>
                            <li>统一</li>
                            <li>今麦郎</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>

img

img


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #ul1 li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left;
            border: 1px solid lightblue;
            background: yellowgreen;
            position: relative;
        }

        #ul1 li:hover {
            background: palegoldenrod;
        }

        #ul1 ul {
            display: none;
            position: absolute;
            left: 100px;
            top: -1px;
        }

        #ul1>li>ul {
            left: 0;
            top: 30px;
        }

        /* hover时展示 */
        #ul1 li:hover>ul {
            display: block;
        }
    </style>
    <body>
        <ul id="ul1">
            <li>首页</li>
            <li>
                <span>公司简介</span>
                <ul>
                    <li>大事记</li>
                    <li>
                        <span>领导致辞</span>
                        <ul>
                            <li>
                                <span>2013年</span>
                                <ul>
                                    <li>10月份</li>
                                    <li>9月份</li>
                                    <li>8月份</li>
                                </ul>
                            </li>
                            <li>2012年</li>
                        </ul>
                    </li>
                    <li>企业文化</li>
                </ul>
            </li>
            <li>联系我们</li>
            <li>
                <span>产品展示</span>
                <ul>
                    <li>康师傅</li>
                    <li>统一</li>
                    <li>今麦郎</li>
                </ul>
            </li>
        </ul>
    </body>
</html>