title: Dropdown menus are all aligned to left
body: <p>I created a dropdown menu through CSS but weirdly all the dropdown menus are aligned to left. I am hoping that all the dropdowns would appear and drop under their parent menu.</p>
  
  <p>The HTML is as follows:-</p>
  
  <pre><code>&lt;div id="menu"&gt;
          &lt;ul&gt;
            &lt;li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages" class="ng-scope selected"&gt;
                  &lt;a href="" ng-click="goToPage($index)" class="ng-binding"&gt;Introduction&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;!-- ngRepeat: smenu in data.subMenu[$index].list --&gt;&lt;li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope"&gt;
                          &lt;a href="" ng-click="goToPage($index)" class="ng-binding"&gt;Profile&lt;/a&gt;
  
                      &lt;/li&gt;&lt;li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope"&gt;
                          &lt;a href="" ng-click="goToPage($index)" class="ng-binding"&gt;Background&lt;/a&gt;
  
                      &lt;/li&gt;&lt;li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope"&gt;
                          &lt;a href="" ng-click="goToPage($index)" class="ng-binding"&gt;What is KAM&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              ...
      &lt;/div&gt;
  </code></pre>
  
  <p>Following is the CSS:-</p>
  
  <pre><code>#menu {
      /*border-bottom:4px seagreen solid;*/
      background-color: #2d394d;
  
      list-style:none;
  }
  
  #menu ul {
      list-style: none;
  }
  
  #menu ul li {
      display: inline-block;
      float: none;
      /*width: 20%;*/
  }
  
  
  #menu ul li a{
      font-size: 10pt;
      padding:12px 24px 12px 24px;
      /*border-right:1px white solid;*/
      display:block;
      text-decoration: none;
      text-align: center;
      color:#fff;
      text-transform: uppercase;
  }
  
  #menu ul li a:hover{
  }
  
  #menu ul li.selected a {
      background-color: #1b86c2;
      color:#fff;
  }
  
  
  /* DropDown Menus */
  
  #menu ul ul{
      background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
      background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
      list-style:none;
      position:absolute;
      left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
  }
  #menu ul li ul li{
      padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
      float:none;
      display: block;
  }
  #nav ul ul a{
      white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
  }
  #menu li:hover ul{ /* Display the dropdown on hover */
      left:0; /* Bring back on-screen when needed */
  }
  #menu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
      background:#1b86c2;
      text-decoration:underline;
  }
  #menu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
      text-decoration:none;
  }
  #menu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
      background:#333;
  }
  </code></pre>
  
  <p>You can see the Image showing it here (where the picture shows the drop down for "Cases", it should be under the Cases, but it is shifted to left. "Introduction" sub-menu also shows at the same place):-</p>
  
  <p><img src="https://i.stack.imgur.com/xuWkF.png" alt="enter image description here"></p>