自定义样式不影响嵌套手风琴如何修复

我正在尝试创建一个自定义样式的手风琴。到目前为止，它的工作方式完全符合我需要它为最外层/父手风琴工作的方式。但是，当涉及到嵌套手风琴时，样式会被jquery-ui的样式覆盖。

链接到小提琴

*
{
    padding:0px;
    margin:0px;
}
#accordion
{
    width:60%;
    margin-left: 20%;
    margin-top: 20px;
}
.subAccordion
{
    width:100%;
    margin-left: 0%;
    margin-top: 10px;
}
.ui-accordion-header
{
    background: url('');
    background-color: #3f414b;
    border-radius: 3px;
    border:0px;
    color:#afb0b3;
    font-size: 16px;
    font-weight: 300;
    padding:1em;
    margin-bottom: 10px;
}
.ui-accordion-content-active
{
    background: url('');
    background-color: #3f414b;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border:0px;
    color:#afb0b3;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    margin-bottom: 10px;
    margin-top: -10px
}
.ui-accordion-header-active
{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    color:#afb0b3;
    font-size: 16px;
    font-weight: 300;
    border-bottom: 1px dashed #595b66;
    margin-bottom: 10px;
}
.ui-accordion .ui-accordion-icons 
{
    padding: 1em;
}
.ui-accordion .ui-accordion-content
{
    padding: 1em;
}
.subAccordion
{
    display: block;
    height: auto;
    width: 90%;
    padding: 5% !important;
}
#accordion div ul li
{
    list-style-type: none;
    line-height: 27px;
    cursor:pointer;
}
.subAccordion div ul li
{
    list-style-type: none;
    line-height: 27px;
    cursor:pointer;
}

<div id="accordion">
  <h3>Talent Supply</h3>
  <div>
    <ul>
        <li>PPP</li>
        <li>PPP Instant</li>
        <li>Patent</li>
        <li>GitHub</li>
        <li>BLSI</li>
    </ul>
  </div>
    <h3>Talent Demand</h3>
    <div class="subAccordion">
        <h3>Job Boards</h3>
        <div></div>
        <h3>Company Career Sites</h3>
        <div>
            <ul>
                <li>Microsoft</li>
                <li>PPP Instant</li>
                <li>Patent</li>
                <li>GitHub</li>
                <li>BLSI</li>
            </ul>
        </div>
    </div>
    <h3>Talent Trends</h3>
    <div>
    <ul>
        <li>News 1</li>
        <li>News 2</li>
    </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>
            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
            mauris vel est.
        </p>
        <p>
            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
            inceptos himenaeos.
        </p>
    </div>
</div>

JS

$(function() {
    $( ".subAccordion" ).accordion({active: false, collapsible: true});
    $( "#accordion" ).accordion();
  });
$(document).ready(function(event){
    _bindEvents();
})
function _bindEvents()
{
    $( ".subAccordion" ).on( "accordionbeforeactivate", function( event, ui ) {
        if($.trim($( ui.newPanel ).html()).length == 0)
        {
             event.preventDefault();
        }
   });
    $( "#accordion" ).on( "accordionactivate", function( event, ui ) {
        $('.ui-accordion-content').css({'height':'auto'});
    });
}