Current menu selector issue

Question

I'm trying to keep the block of code below from rendering on the current-menu-item for the sub-menu but it still renders on it. How do I stop it from rendering on the sub-menu LI's

 #nav-bar ul:not(.sub-menu) li.current-menu-item
    {
        filter: alpha(opacity=100);
        opacity: 1;
        zoom: 1px;
        background-color:#65B6D3;
        @include vertical-gradient(#74D7FC, #4B7C8E);
        text-shadow:0 1px 1px rgba(255,255,255,0.5);
        height: 100%;



}

Answer 1

Couldn't solve another way so after some experiment, I targeted and cancelled out the background of the sub-menu LI as shown below and it worked.

#nav-bar li.menu-item-has-children ul.sub-menu li.current-menu-item {
    background: none ;
}