[caetus]

так тебе нужно ?

<style>
#div {
border: solid black 1px;
display: inline-block;
}
.hover {
	background: red;
	transition: 3s;
}
.normal {
	background: #fff;
	transition: 3s;
}
a {
display: inline-block;

}
</style>

<div id="div">
      <div class="s1">
                <div class="s2">
                <div class="p1">
                <ul class="subMenus">
                 <li><a href="#">Sub menu 1 item 1</a></li>
                 <li><a href="#">Sub menu 1 item 2</a></li>
                 <li><a href="#">Sub menu 1 item 3</a></li>
                 <li><a href="#">Sub menu 1 item 4</a></li>
          </ul>
</div>

                 <div class="p1">
                <ul class="subMenus">
                 <li><a href="#"></a></li>
                 
          </ul>
</div>
                 <div class="p1">
                 <ul class="subMenus">
                 <li><a href="#">Sub menu 3 item 1</a></li>
                 <li><a href="#">Sub menu 3 item 2</a></li>
                 <li><a href="#">Sub menu 3 item 3</a></li>
                 <li><a href="#">Sub menu 3 item 4</a></li>
          </ul>
</div>
                
                            
               
                </div>
            </div>
</div>

<script>

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

div.addEventListener('mouseover', fn, false);

function fn (e) {
e = e.target || e.srcElement;

if(e.tagName.toLowerCase() !== 'a') return;

var elem = div.querySelectorAll('a')
for(var i = 0; i < elem.length; i++) {
        if(elem[i].className !== 'hover')	elem[i].className = 'hover';
}
e.className = 'normal'

div.addEventListener('mouseout', out, false);
}

function out (e) {
e = e.target || e.srcElement;
if(e.tagName === 'A') return;
	var elem = div.querySelectorAll('a')
	for(var i = 0; i < elem.length; i++) {
                if(elem[i].className != 'normal')	elem[i].className = 'normal';
	}

div.removeEventListener('mouseout', out);
;
}

</script>