我的第二个子菜单CSS无法正常工作

Question

我无法在第一子菜单的右侧获得第二个子菜单（GUIDE解决方案，Teste1，Teste2和Teste3项目作为2SUBMENU）。我在UL和LI中尝试了所有方法，但没有任何工作。有人可以提出不同的建议吗？

nav.navbar.bootsnav {
    background: #222533 none repeat scroll 0 0;
    border: 0 none;
  }
  nav.navbar.bootsnav ul.nav>li>a {
    color: #fff;            
  }
  nav.navbar.bootsnav ul.nav>li>a:hover,
  nav.navbar.bootsnav ul.nav>li>a:focus {
    color: #f00;
    background: rgba(200, 54, 54, 0.5) !important;
    font-weight: normal;
    display: block !important;
  }
  #navbar-menu {
    margin: 6px 0;
  }
  .nav.navbar-nav.menu {
    float: left; 
  }
  #navbar-submenu li{
    margin: 6px 0;
  }
  .nav.navbar-nav.submenu li:hover{
    float: left;            
  }
  .attr-nav {
    margin: 5px -10px 0 0;
  }
  .attr-nav>ul>li>a {
    color: #e74c3c;
    font-size: 20px;            
  }
  .attr-nav>ul>li>a:hover,
  .attr-nav>ul>li>a:focus {
    color: #660000;
  }        
  a:hover {
    text-decoration: underline;
    color:#e74c3c;
  }    
  ul {
    list-style-type: none;
  }        
  li a:hover, .dropdown:hover {
    background: rgba(200, 54, 54, 0.5);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  }        
  .dropdown {
    position: relative;
  }
  .dropdown-submenu {
    position: relative;
    left: 100%;
  }
  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 0%;
    margin-top: -1px;
  }        
  .dropdown-content {
    display: none;
    position: absolute;         
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
    z-index: 1;            
    color: #f00;
    background: rgba(200, 54, 54, 0.5) !important;
    font-weight: normal;
  }
  .dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover {
    color: #660000;
    background-color: #e74c3c;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar bootsnav" style="background-color:rgba(0, 0, 0, 0.125);">
        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="dimmer_menu nav navbar-nav menu">
            <li><a href="">HOME</a></li>
            <li><a href="">NÓS</a></li>
            <li class="dropdown">
              <a href="#">SOLUÇÕES<b class="caret"></b></a>
              <ul class="dropdown-content">
                <span class="nav-header">&emsp;QUAIS</span>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">AS DELES  >>></a>
                <li><a href="#">Teste1</a></li>
                <li><a href="#">Teste2</a></li>
                <li><a href="#">Teste3</a></li> 
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">AS NOSSAS >>></a>       <li class="divider"></li>
                <a href="">TODOS ELES</a>
              </ul>
            </li>
            <li><a href="">PORTFOLIO</a></li>
            <li class="dropdown"><a href="#">COMO SERA ? <b class="caret"></b></a>
              <ul class="dropdown-content">
                <span class="nav-header">&emsp;ALFABETO</span>
                <a href="#">ALPHA</a>
                <a href="#">BETHA</a>
                <a href="#">GAMMA</a>
              </ul>
            </li>
            <li><a href="">CONTATO</a></li>
          </ul>
        </div>
      </nav>

[1]：https://i.stack.imgur.com/06835.jpg-这是我的实际菜单。