Question

jQuery UI accordion panel contains list of single line menu items. Menu items needs to grouped.
I tried to add line between menu items using <hr/> but line does not appear, empty row appears instead.
How to add line between menu items or other weay to group items without empty line?

<a href="#">Panel1</a></h3>
        <ul style="padding-top:0px;padding-bottom:0px;padding-left:8px">
         <li ><a href='ref1'>Item1</a></li>
         <li ><a href='ref2'>Item2</a></li>
         <li><hr /></li>
         <li ><a href='ref3'>Item3</a></li>
         <li ><a href='ref3'>Item4</a></li>
..

settings used:

    $( "#accordion" ).accordion({
        fillSpace: false,
        autoHeight: true,
        navigation: true,
    collapsible: true,
    clearStyle: true
});

Answer 1

Try the following ccs code to underline every item:

li {
  border-bottom-style: solid;
  border-bottom-width:1px;
}

The following code can be used to underline only defined items:
CSS:

li.underline { 
  border-bottom-style: solid; 
  border-bottom-width:1px; 
} 

HTML

<li class="underline">Item</li>