SOURCE

 window.onload = function() {
        var oUl = document.getElementById('list');
        var aLi = document.getElementsByTagName('li');
        var str = '';
        for (var i = 0; i < 12; i++) {
            str += '<li>' + i + '</li>'
        }
        oUl.innerHTML = str;
        for (var i = 0; i < 12; i++) {
            aLi[i].innerHTML += '<div>' + i + '</div>'
            aLi[i].onmouseover = function() {
                this.getElementsByTagName('div')[0].style.display = 'block';
            }
            aLi[i].onmouseout = function() {
                this.getElementsByTagName('div')[0].style.display = 'none';
            }
        }


    }

   <ul id="list" class="clear">
    </ul>

     ul {
            width: 720px;
            text-align: center;
            line-height: 80px;
            margin: 100px 0 0;
        }
        
        li {
            margin: 20px;
            float: left;
            width: 80px;
            height: 80px;
            background: red;
            list-style-type: none;
            position: relative;
        }
        
        div {
            display: none;
            background: blue;
            position: absolute;
            width: 120px;
            height: 100px;
            left: 20px;
            bottom: 60px;
            z-index: 2;
        }
        
        .clear {
            zoom: 1;
        }
        
        .clear::after {
            clear: both;
            display: block;
            content: '';
            height: 0;
            visibility: hidden
        }