jQueryUI Accordian Menu - How to deal with items with no sub-menus

Question

I've got a vertical menu using jQueryUI's Accordian method. The first two items have sub-menus and then the rest don't. I also have the event set to 'hover' instead of 'click'.

The problem: is that when you hover over any of the items with no sub-menus, then it hides the one with a sub-menu. Is there a way I can make it so it always keeps at least one item with a sub-menu open? Or another way to say this: is there a way to force items with no sub-menus to not collapse any other items?

Here's an example of my menu...

<ul class="nav" id="menu_left"> 
    <li class="expand"><a href="/category" class="current head">products</a> 
        <ul> 
            <li class="top png first"></li> 
            <li><a href="/category/523">Category</a></li> 
            <li><a href="/category/428" >Category</a></li> 
            <li><a href="/category/498">Category</a></li> 
            <li class="space"><div></div><a href="/category/507">Category</a></li> 
            <li><a href="/category/">Category</a></li> 
            <li><a href="#">Category</a></li> 
            <li><a href="#">Category</a></li> 
            <li class="space"><div></div><a href="#">Category</a></li> 
            <li><a href="#">Category</a></li> 
            <li class="bottom png"></li> 
        </ul> 
    </li> 
    <li class="expand"><a href="/category/">custom</a> 
        <ul> 
            <li class="top png first"></li> 
            <li><a href="/category">Category</a></li> 
            <li class="space"><div></div><a href="/category/428" >Category</a></li> 
            <li><a href="/category/498">Category</a></li> 
            <li class="bottom png"></li> 
        </ul> 
    </li> 
    <li><a href="javascript:void(0);" class="head" >Contact</a></li> 
    <li><a href="javascript:void(0);" class="head">Blog</a></li> 
    <li><a href="javascript:void(0);" class="head">Feature</a></li> 
</ul>

$('#menu_left').accordion({
    active: 0,
    autoHeight: true,
    animated: 'slide',
    event: 'mouseover',
    header: "> li > :first-child,> :not(li):even",
    collapsible: false,
    navigationFilter: function() {
        return this.href.toLowerCase() == location.href.toLowerCase();
    }
});

Answer 1

You could have two separate menus, and just style it to look like one.

<ul class="nav" id="menu_left"> 
  <li class="expand"><a href="/category" class="current head">products</a> 
    <ul> 
      ...
    </ul> 
  </li> 
  <li class="expand"><a href="/category/">custom</a> 
    <ul> 
      ...
    </ul> 
  </li> 
</ul>
<ul class="nav">
  <li><a href="javascript:void(0);" class="head" >Contact</a></li> 
  <li><a href="javascript:void(0);" class="head">Blog</a></li> 
  <li><a href="javascript:void(0);" class="head">Feature</a></li> 
</ul>

$('#menu_left').accordion({
  ...
});

Answer 2

I solved this by changing the header option to look like this...

header: '> li.expand > :first-child,> :not(li):even'

I also changed autoHeight to false...

autoHeight: false