JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="pagecateg">
<li >
<div class="categimg" ><a href="http://" title="">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" title="" alt=""/></a></div>

<p class="categname" style="padding-bottom:5px" >


<a href="http://" title="" >Text </a></p>

<div class="sp" style='visibility:hidden;'> <div class="subcat">
<a href="http:" title="">
Название субкатегории</a>

    </div></div></li>
<li >
<div class="categimg" ><a href="http://" title="">
<img src="http://javascript.ru/forum/image.php?u=12584&dateline=1310044212" title="" alt=""/></a></div>

<p class="categname" style="padding-bottom:5px" >


<a href="http://" title="" >Text </a></p>

<div class="sp" style='visibility:hidden;'> <div class="subcat">
<a href="http:" title="">
Название субкатегории</a>

    </div></div></li>
</ul>

JavaScript

var i = document.getElementsByTagName("div"),
    a = i.length,
    img,
    mouseoverDivCateg;
    

// назначаем обработчики.
while( a-- ) if ( i[a].className === 'categimg' ) {
    
    // img - картинка внутри div с классом categimg.
    img = i[a].getElementsByTagName('img')[0];
    
    img.onmouseover = find_sp;
    img.onmouseout = hide_sp;
    
}

function find_sp(e) {
    var parent, currElem = e ? e.target : event.srcElement;
    
    // ищем li , с которой начинается текущая категория.
    while( currElem.tagName.toLowerCase() !== 'li' ) currElem = currElem.parentNode;
    

    // ищем div с классом sp, который относится  к текущей категории
    var div = currElem.getElementsByTagName("div"),i = div.length;
    while( i-- ) if (div[i].className === "sp") break;
        div = div[i];

    div.style.visibility = "visible";
    
    // сохраняем этот дивчик, чтобы потом не искать
    mouseoverDivCateg = div;
    
}

function hide_sp() { 
    // скрываем сохраненный див
    mouseoverDivCateg.style.visibility= "hidden";
}