I only have a basic understanding of jQuery, I hope someone will be able to help, I have already spent 2 days trying to figure this out.

I used the accordion with icons from jQuery-ui to create a menu. When the selected main menu item is clicked the accordion opens up to show a submenu with icons exactly like the parent menu item. I am using an unordered list for the sub-menu.

I am having 2 problems:

1.)  When the accordion opens up, the area where the sub-menu is takes up only half of the area. I need it to take up the entire area. I have looked at the styles until my eyes crossed and I can not find where to make this correction. Inline styles are not an option. How/where do I make this correction.

2.) I want to add icons to the sub-menu exactly like the ones on the  parent menu item. The sub-menu is an unordered list. I suspect the width issue with problem one is part of this problem. My CSS to style the sub-menu is being over-ridden somewhere, I can't remove the bullets from the list or the text decoration. I again looked at all of the css and I can not pinpoint the reason for my styles being ignored. When I can get the icons to show for the sub-menu, the entire image (ui-icons_444444_256x240.png) of the all the sprits are seen or the icons don't show up at all. I want the east triangle (.ui-icon-triangle-1-e) for the default and the south triangle (.ui-icon-triangle-1-sw) for the active link.

My HTML is:

<!-- Accordion -->

<div id="accordion"  class="ui-accordion">

 <h3>Photo Admin</h3>

 <div>

      <ul class="subMenuList">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">link 2</a></li>
              <li><a href="#">link 3</a></li>
        </ul>
 </div>

 <h3>Learning Styles</h3>

 <div>

      <ul class="subMenuList">>
             <li><a href="#">Link 4</a></li>
              <li><a href="#">link 5</a></li>
              <li><a href="#">link 6</a></li>
       </ul>
 </div>