Pop Over Tab Menu v2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>Pop Over Menu</title>
<script type="text/javascript">
<!--
var over = new Array();
over[1] = new Image();
over[2] = new Image();
over[3] = new Image();
over[4] = new Image();
over[1].src = 'images/tab1o.jpg';
over[2].src = 'images/tab2o.jpg';
over[3].src = 'images/tab3o.jpg';
over[4].src = 'images/tab4o.jpg';

var out = new Array();
out[1] = new Image();
out[2] = new Image();
out[3] = new Image();
out[4] = new Image();
out[1].src = 'images/tab1.jpg';
out[2].src = 'images/tab2.jpg';
out[3].src = 'images/tab3.jpg';
out[4].src = 'images/tab4.jpg';

var timeOutId=0;
var cDiv=null;

function moTab(oTab) {
    if (cDiv!=null) {
        closeTab(cDiv);
    }
    clearTimeout(timeOutId);
    var tabnum = parseInt(oTab.id.substr(2,1));
    oTab.src = over[tabnum].src;
    var tabId = 't'+oTab.id;
    var parent = document.getElementById('theExample');
    var pTop = parent.offsetTop;
    var pLeft = parent.offsetLeft;
    var iHeight = oTab.height;
    var top = oTab.offsetTop + pTop + iHeight;
    var left = oTab.offsetLeft + pLeft;
    cDiv = document.getElementById(tabId);
    cDiv.style.display = 'block';
    cDiv.style.top = top+'px';
    cDiv.style.left = left+'px';
}

function moutTab(oTab) {
    var tabnum = parseInt(oTab.id.substr(2,1));
    oTab.src = out[tabnum].src;
    timeOutId = setTimeout(closeTab,500);
}

function mouseTab() {
    clearTimeout(timeOutId);
}

function startCloseTab() {
    timeOutId = setTimeout(closeTab,800)
}

function closeTab() {
    cDiv.style.display = 'none';
}

function tabClick(objA) {
    if (cDiv!=null) {
        closeTab(cDiv);
    }
    alert('Replace me with document.location='+objA.id+'.html');
    return false;
}
//-->
</script>
<style>
<!--
.tabMenu {
    width:200px;
    color: #000080;
    border: 1px solid #000080;
    padding: 7px 2px 2px 2px;
    background-color: #FFFFFF;
    font-size:0.9em;
}
.bottom {
    color: #000080;
    border-top: 1px solid #808080;
    background-color: #F4F4FF;
    padding: 0px;
    font-size:0.8em;
}
#theExample {
    position:relative;
}

#tab1, #tab2, #tab3, #tab4 {
    position:absolute;
    top:1000px;
    left:200px;
    display:none;
}
-->
</style>
</head>

<body>

<div id="theExample">
<a id="Tab1Page" title="Goto Tab1page.htm" href="#" onclick="return tabClick(this);"><img id="ab1" class="aTab" src="images/tab1.jpg" width="109" height="38" onmouseover="moTab(this)" onmouseout="moutTab(this);" alt="Tab 1"></a><a id="Tab2Page" title="Goto Tab2page.htm" href="#" onclick="return tabClick(this);"><img id="ab2" class="aTab" src="images/tab2.jpg" width="109" height="38" onmouseover="moTab(this)" onmouseout="moutTab(this);" alt="Tab 2"></a><a id="Tab3Page" title="Goto Tab3page.htm" href="#" onclick="return tabClick(this);"><img id="ab3" class="aTab" src="images/tab3.jpg" width="109" height="38" onmouseover="moTab(this)" onmouseout="moutTab(this);" alt="Tab 3"></a><a id="Tab4Page" title="Goto Tab4page.htm" href="#" onclick="return tabClick(this);"><img id="ab4" class="aTab" src="images/tab4.jpg" width="109" height="38" onmouseover="moTab(this)" onmouseout="moutTab(this);" alt="Tab 4"></a></div>
</div>

<div id="tab1" class="tabMenu" onmouseover="mouseTab()" onmouseout="startCloseTab()">
    <ul type="square">
      <li>Link 1</li>
      <li>Link 1</li>
      <li>Link 1</li>
      <li>Link 1</li>
      <li>Link 1</li>
    </ul><div class="bottom"><p>Mauris aliquam orci vel enim aliquam venenatis. Aenean nec nisl. Phasellus tincidunt.</p></div>
</div>
<div id="tab2" class="tabMenu" onmouseover="mouseTab()" onmouseout="startCloseTab()">
    <ul type="square">
      <li>Link 2</li>
      <li>Link 2</li>
      <li>Link 2</li>
      <li>Link 2</li>
      <li>Link 2</li>
    </ul><div class="bottom"><p>Mauris aliquam orci vel enim aliquam venenatis. Aenean nec nisl. Phasellus tincidunt.</p></div>
</div>
<div id="tab3" class="tabMenu" onmouseover="mouseTab()" onmouseout="startCloseTab()">
    <ul type="square">
      <li>Link 3</li>
      <li>Link 3</li>
      <li>Link 3</li>
      <li>Link 3</li>
      <li>Link 3</li>
    </ul><div class="bottom"><p>Mauris aliquam orci vel enim aliquam venenatis. Aenean nec nisl. Phasellus tincidunt.</p></div>
</div>
<div id="tab4" class="tabMenu" onmouseover="mouseTab()" onmouseout="startCloseTab()">
    <ul type="square">
      <li>Link 4</li>
      <li>Link 4</li>
      <li>Link 4</li>
      <li>Linkv4</li>
      <li>Link 4</li>
    </ul><div class="bottom"><p>Mauris aliquam orci vel enim aliquam venenatis. Aenean nec nisl. Phasellus tincidunt.</p></div>
</div>
</body>

</html>
How can you have a pop over menu with DIV tags?
