Загрузка данных

<html>
<head>

<script>

function doShow(menu)
{
    document.getElementById("menu1").style.visibility = "hidden";
    document.getElementById("menu2").style.visibility = "hidden";
    document.getElementById("menu3").style.visibility = "hidden";

    document.getElementById(menu).style.visibility = "visible";
}

function doHide()
{
    document.getElementById("menu1").style.visibility = "hidden";
    document.getElementById("menu2").style.visibility = "hidden";
    document.getElementById("menu3").style.visibility = "hidden";
}

</script>

<style>

#p0 {
    position:absolute;
    top:60px;
    left:0px;
    width:200px;
    height:40px;
    background-color:red;
}

#p1 {
    position:absolute;
    top:100px;
    left:0px;
    width:200px;
    height:40px;
    background-color:green;
}

#p2 {
    position:absolute;
    top:140px;
    left:0px;
    width:200px;
    height:40px;
    background-color:green;
}

#p3 {
    position:absolute;
    top:180px;
    left:0px;
    width:200px;
    height:40px;
    background-color:green;
}

#p4 {
    position:absolute;
    top:220px;
    left:0px;
    width:200px;
    height:40px;
    background-color:red;
}


#menu1 {
    position:absolute;
    left:200px;
    top:100px;
    width:300px;
    height:80px;
    background-color:blue;
    visibility:hidden;
    color:white;
}

#menu2 {
    position:absolute;
    left:200px;
    top:140px;
    width:300px;
    height:80px;
    background-color:blue;
    visibility:hidden;
    color:white;
}

#menu3 {
    position:absolute;
    left:200px;
    top:180px;
    width:300px;
    height:80px;
    background-color:blue;
    visibility:hidden;
    color:white;
}

</style>

</head>

<body>

<div id="p0"></div>

<div id="p1" onmouseover="doShow('menu1')">
КВАРТИРЫ
</div>

<div id="p2" onmouseover="doShow('menu2')">
ДОМА
</div>

<div id="p3" onmouseover="doShow('menu3')">
УЧАСТКИ
</div>

<div id="p4"></div>


<div id="menu1">
МЕНЮ 1
</div>

<div id="menu2">
МЕНЮ 2
</div>

<div id="menu3">
МЕНЮ 3
</div>

</body>
</html>