Bootstrap Affix overlapping submenu

Question

I trying to add affix to a menu and a sidebar to fix their position on scroll down. My menu has a submenu which are overlapping the sidebar on normal position. After adding affix, the sidebar overlapping always the submenu if page is scrolled down.

I think the affixed event adds some css to the sidebar to do that. I want now to add some own css to the single submenu, which adds css to brings the submenu to front again.

How can i do that correctly - i can't find the correct solution.

HTML code:

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul id="menu" class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li>
        <a href="#">Page 1</a>
        <ul id="overlapingSubmenu">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
            <li>Test 5</li>
        </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <nav class="col-sm-3">
        <div id="sbb" style="width: 200px; border: 1px solid #000; margin-top: 70px;">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
          </ul>
        </div>
    </nav>
    <div class="col-sm-9">   
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling 777</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </div>
</div>

CSS code:

.affix {
    top: 20px;
}

.affix {
    top: 0;
    width: 100%;
}

.affix + .container-fluid {
    padding-top: 70px;
}

ul.nav li ul
{
    display: none;
    position: absolute;
}

ul.nav li:hover ul
{
    display: block;
    width: 160px;
    background-color: #777;
    z-index: 99999;
}

ul.nav li:hover ul li
{
    height: 35px;
    width: 160px;
}

.menuToTop 
{
    z-index: 99999 !important;
    position: fixed !important;
    border: 1px solid #ff0000;
    background-color: #aaa !important;
}

JS Code:

$(document).ready(function(){
    $('#sbb').affix({offset: {top: 150} }); 
    $('#sbb').on('affixed.bs.affix', function(){
        console.log('affixed ...');
        $( "#overlapingSubmenu" ).addClass( "menuToTop" );
    });
});

Here is an example fiddle: https://jsfiddle.net/6dn9364L/