
<html>

<head>

<style type="text/css">

div{

        border: 1px solid #000;

        margin: .5em;

}

</style>


<script language="javascript" type="text/javascript">

function dentro(id) {

        var div = document.getElementById('debug');

        div.innerHTML += "<br>dentro "+id;

}


function esco(id) {

        var div = document.getElementById('debug');

        div.innerHTML += "<br>esco "+id;

        
}


</script>

</head>

<body>

<div id='S0' style="background-color: orange;" onmouseover="dentro('S0')" onmouseout="esco('S0')">

                   <div id="S1" style="height: 20px; line-height:20px;margin-left: 5px;" onmouseover="dentro('S1')" onmouseout="esco('S1')"><a href="index.html" style="font-size: 10px;">S1</a></div>

                   <div id="S2" style="height: 20px; line-height:20px;margin-left: 5px;" onmouseover="dentro('S2')" onmouseout="esco('S2')"><a href="index.html" style="font-size: 10px;">S2</A></div>

                   <div id="S3" style="height: 20px; line-height:20px;margin-left: 5px;" onmouseover="dentro('S3')" onmouseout="esco('S3')"><a href="index.html" style="font-size: 10px;">S3</A></div>

                   <div id="S4" style="height: 20px; line-height:20px;margin-left: 5px;" onmouseover="dentro('S4')" onmouseout="esco('S4')"><a href="index.html" style="font-size: 10px;">S4</A></div>

</div>

<div id='debug'></div>

</body>

</html>