title: Dropdown-submenu not functional even after adding it to CSS and implementing in html
body: <p>I am using bootstrap v3.0.0. I am aware that this does not support dropdown-submenu. Lot of solutions posted on stackoverflow and other sources provided the "dropdown-submenu" CSS that I added to my Bootstrap.css and also made changes to my HTML. </p>
  
  <p>And here is my HTML:</p>
  
  <pre><code> &lt;li id="navPayments" class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Movies&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
             &lt;li class="dropdown-submenu"&gt;
                 &lt;a tabindex="-1" href="#"&gt;Scary&lt;/a&gt;
                 &lt;ul class="dropdown-menu"&gt;
                     &lt;li style="display: block; width: 100%"&gt;@this.Html.ActionLink("Voilent", "Voilent", "Movies")&lt;/li&gt;
                     &lt;li style="display: block; width: 100%"&gt;@this.Html.ActionLink("Extortion", "Extortion", "Movies")&lt;/li&gt;
                     &lt;li style="display: block; width: 100%"&gt;@this.Html.ActionLink("Evil", "Evil", "Movies")&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/li&gt;   
          &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.dropdown-submenu{
      position:relative;
  }
  
  .dropdown-submenu &gt; .dropdown-menu
  {
      top:0;
      left:100%;
      margin-top:-6px;
      margin-left:-1px;
      -webkit-border-radius:0 6px 6px 6px;
      -moz-border-radius:0 6px 6px 6px;
      border-radius:0 6px 6px 6px;
  }
  .dropdown-submenu:hover &gt; .dropdown-menu{
      display:block;
  }
  .dropdown-submenu &gt; a:after{
      display:block;
      content:" ";
      float:right;
      width:0;
      height:0;
      border-color:transparent;
      border-style:solid;
      border-width:5px 0 5px 5px;
      border-left-color:#cccccc;
      margin-top:5px;
      margin-right:-10px;
  }
  .dropdown-submenu:hover &gt; a:after{
      border-left-color:#ffffff;
  }
  .dropdown-submenu .pull-left{
      float:none;
  }
  .dropdown-submenu.pull-left &gt; .dropdown-menu{
      left:-100%;
      margin-left:10px;
      -webkit-border-radius:6px 0 6px 6px;
      -moz-border-radius:6px 0 6px 6px;
      border-radius:6px 0 6px 6px;
  }
  </code></pre>
  
  <p>I see the menu Scary inder Movies but it does not bring up the sub-menus when I hover over that. I am not sure what I am missing here. And it also does not show the little right arrow beside "Scary" menu. </p>