Самое близкое к тому, что надо:
<div class="category" >
<ul class="category_list">
{% for i in categories %}
<li onmouseover="document.getElementById('{{ i.slug }}').style.display='block';" onmouseout="document.getElementById('{{ i.slug }}').style.display='none';"> <a id={{ i.id }} class="category-name" href="">{{ i }}</a></li>
{% endfor %}
</ul>
</div>
{% for i in categories %}
<div id="{{ i.slug }}" class="subcategory" onmouseover="document.getElementById('{{ i.slug }}').style.display='block';" onmouseout="document.getElementById('{{ i.slug }}').style.display='none';">
</div>