Вам принципиальны теги? Ну не нравятся ul > li сделайте div > div.
код в самом тривиальном варианте будет примерно таким:
<div class="menu-item">
<a href="#">menu name</a>
<div class="sub-menu">
sub menu content
</div>
</div>
<div class="menu-item">
<a href="#">menu name</a>
<div class="sub-menu">
sub menu content
</div>
</div>
<div class="menu-item">
<a href="#">menu name</a>
<div class="sub-menu">
sub menu content
</div>
</div>
<script>
jQuery(document).ready(function($){
$('.menu-item').hover(
function(){
$(this).find('.sub-menu').show();
},
function(){
$(this).find('.sub-menu').hide();
}
);
});
</script>
<style>
.sub-menu{
display:none;
}
</style>
