Аккордеонное меню - активное состояние

В последнее время мне удалось создать меню для аккордеона. Я сделал все, кроме этого, что искал помощи.

Это мое меню для аккордеона:

HTML

<div class="sidebar-wrapper">
    <ul class="main_nav">
       <li><a href='#'>MAIN 1</a>
          <ul class="sub-menu">
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
               <ul class="sub-sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
             <li><a href='#'>SUB MENU</a>
                <ul class="sub-menu">
                   <li><a href='#'>SUB-SUB MENU</a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'>MAIN 2</a></li>
    </ul>
    </div>

CSS

.sidebar-wrapper {
        width: 250px;
        margin-top: 30px;
    }

    .main_nav {
        width: 250px;
        list-style: none;
        padding: 40px 30px 25px 0;
        font-family: Arial;
    }

    ul.main_nav {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    ul.main_nav li {
        list-style-type: none;
    }

    ul.main_nav li a {
        background-image: url('../images/acmenu_bg.png');
        background-repeat: repeat-x;
        line-height: 10px;
        padding: 13px 10px;
        display: block;
        text-decoration: none;
        font-size: 13px;
        color: #fff;
        font-weight: bold;
        list-style: none;
    }

    ul.main_nav li a:hover {
        /* background-image: url('');  HOVER ?!*/
        color: #ef7b0b;
    }

    ul.main_nav ul {
        margin: 0;
        padding: 0;
        display: none;
    }

    ul.main_nav ul li {
        margin: 0;
        padding: 0;
        clear: both;
    }

    ul.main_nav ul li a {
        background-image: url('../images/acmenu2_bg.png');
        background-repeat: repeat-x;
        padding-left: 20px;
        font-size: 12px;
        font-weight: bold;
    }

    ul.main_nav ul li a:hover {
        color: #dcdcdc;
        /* HOVER */
    }

    ul.main_nav ul li a:active {
        background-image: url('../images/acmenu1_bg.png');
        background-repeat: repeat-x;
    }

    ul.main_nav ul ul li a {
        background: #f6f6f6;
        color: #000;
        padding-left: 40px;
        border-bottom: 1px solid #e7e7e7;
    }

    ul.main_nav ul ul li a:hover {
        color: #ef7b0b;
        text-decoration: underline;
    }

JS

$(document).ready(function() {
$('.sidebar-wrapper ul li a').click(function(ev) {
    $('.sidebar-wrapper .sub-menu').not($(this).parents('.sub-menu')).slideUp();
    $(this).next('.sub-menu').slideToggle();
    $('.main_nav ul li a').removeClass('active');
    $(this).addClass('active');
    ev.stopPropagation();
});
});

Пример моего аккордеона jsFiddle

Как вы можете видеть, я попытался написать код как можно проще. Есть две вещи, с которыми я не могу справиться:

Первый. ) Я сделал фон hover для моего подменю (только) - когда он щелкнул список под-подменю, показывается - я хотел бы иметь только элементы подменю, которые нужно зависнуть (с этим оранжевым градиентом), а не под-sub пункты меню, потому что, когда вы нажимаете элемент под-подменю, он принимает активное состояние из пункта подменю, удаляет его и назначает для себя. У меня проблема с этим. ?

Второй. ) Это связано с элементами подзаголовка. Я бы хотел, чтобы элемент подменю активен (покрыт оранжевым фоном градиента), когда у меня есть активный элемент подзаголовка, который нажал (что является оранжевым подчеркиванием). Еще одна вещь, я бы хотел, чтобы она всегда рушилась, если элемент подзаголовка активен.

Если вам что-то непонятно или я что-то не так написал, пожалуйста, поправьте меня и не стесняйтесь спрашивать подробности.

Я был бы очень признателен за вашу помощь.

Спасибо. Приветствия - Крис