createElement创建元素问题

//下面这个代码怎么用createElement做，除了JS部分其他部分不要有任何代码，全部有JS创建 CSS用element.cssText代替
<style> //CSS部分   
li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; }    
div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; }    
</style>
<script>//  js部分
window.onload = function (){
    var aLi  = document.getElementsByTagName('li');
    var that = null;

    for( var i=0; i<aLi.length; i++ ){
        aLi[i].onmouseover = function (){
            that = this;
            fn1();
        };
        aLi[i].onmouseout = function (){
            this.getElementsByTagName('div')[0].style.display = 'none';
        };
    }

    function fn1(){
        that.getElementsByTagName('div')[0].style.display = 'block';
    }
    </script>
    <ul>  //html部分  
    <li>    
   <div></div>    
</li>    
    <li>    
   <div></div>    
</li>    
    <li>    
   <div></div>    
</li>    
</ul>     

此外如果用for套for的方法怎么做？ 如果每个li包含多个div呢，现在的方法是ali[i].div[0] 如果用for套for实现呢？

         for (var i = 0; i < aLi.length; i++) {
            aLi[i].onmouseover = function () {
                that = this;
                fn1();
            };
            aLi[i].onmouseout = function () {
                //this.getElementsByTagName('div')[0].style.display = 'none';
                var div = this.getElementsByTagName('div');
                for (var i = 0; i < div.length; i++)
                    div[i].style.display = 'none';
            };
        }

        function fn1() {
            //that.getElementsByTagName('div')[0].style.display = 'block';
            var div = that.getElementsByTagName('div');
            for (var i = 0; i < div.length; i++)
                div[i].style.display = 'block';
        }