下拉列表不在边栏中工作但在内容中工作

Question

我试图抓住html和CSS并创建一个侧栏（导航栏）。侧栏中的一个列表应该有子菜单的下拉列表。我没有发现我的代码有什么问题，因为当我在内容div中使用相同的代码时，它工作正常。但它在侧栏中并不能正常工作。其他有趣的是当窗口调整为小尺寸时。下拉列表在折叠的导航栏内工作。

<nav class="navbar navbar-default navbar-fixed-side" >
        <div class="container">
          <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="./">CTO HIRE LOGO</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" >
                <li>
                <a href="" style="padding-top: 10px; padding-bottom: 10px; border:none;" ></a> 
                <div class = "dropdown">Profiles 
                <button class = "dropdown-toggle" type = "button" data-toggle = "dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                      </ul></div>
                <a href="" style="padding-top: 10px; padding-bottom: 10px; border:none;" >Create Profile</a> 
                <a href="" style="padding-top: 10px; padding-bottom: 10px; border:none;">Settings</a>
                <a href="" style="padding-top: 10px; padding-bottom: 10px; border:none;">Payment</a>
                </li>

            </ul>


          </div>
        </div>
      </nav>

但同样的Dropdown在这里工作正常

<div class="col-sm-9 col-lg-10">
  <!-- your page content -->

                        <div class = "dropdown">Profiles 
                <button class = "dropdown-toggle" type = "button" data-toggle = "dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                      </ul></div>
</div>