title: Sub menu of sub menu is not inline
body: <p>I m new to HTML and try to create menu in HTML using css. I created a 2 level css drop down menu but the problem is that the sub menu of sub menu or 2nd level menu is not displaying in line as it should.</p>
  
  <p>here is HTML file:</p>
  
  <pre><code>&lt;nav&gt;
          &lt;ul&gt;
              &lt;li class="menuList"&gt;&lt;a href="#" class="menuItem"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="menuList"&gt;
                  &lt;a href="#" class="menuItem"&gt;Menu 2&lt;/a&gt;
                  &lt;ul class="menuLevel1"&gt;
  
                      &lt;li class="subMenu1"&gt;
                          &lt;a href="#" class="itemLevel1"&gt;Sub menu 1&lt;/a&gt;
                      &lt;/li&gt;
  
                      &lt;li class="subMenu1"&gt;
                          &lt;a href="#" class="itemLevel1"&gt;Sub menu 2&lt;/a&gt;
                          &lt;ul class="menuLevel2"&gt;
                              &lt;li class="subMenu2"&gt;&lt;a href="#" class="itemLevel2"&gt;Sub Sub menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="subMenu2"&gt;&lt;a href="#" class="itemLevel2"&gt;Sub Sub menu 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="subMenu2"&gt;&lt;a href="#" class="itemLevel2"&gt;Sub Sub menu 3&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
                      &lt;li class="subMenu1"&gt;
                          &lt;a href="#" class="itemLevel1"&gt;Sub menu 3&lt;/a&gt;
                          &lt;ul class="menuLevel2"&gt;
                              &lt;li class="subMenu2"&gt;&lt;a href="#" class="itemLevel2"&gt;Sub Sub menu 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="subMenu2"&gt;&lt;a href="#" class="itemLevel2"&gt;Sub Sub menu 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="subMenu2"&gt;&lt;a href="#" class="itemLevel2"&gt;Sub Sub menu 3&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="menuList"&gt;&lt;a href="#" class="menuItem"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>And css file:</p>
  
  <pre><code>.menuBar {
  background-color: #92CCDA;
  }
  ul{
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  }
  .menuList{
  float: left;
  }
  .menuItem{
  display: block;
  width: 100px;
  height: 25px;
  padding: 10px;
  background-color: #92CCDA;
  color: white;
  text-decoration: none;
  text-align: center;
  }
  a:hover {
  background-color: orange;
  }
  .menuLevel1{
  display: none;
  }
  .subMenu1 {
  display: block;
  }
  .itemLevel1{
  display: block;
  width: 120px;
  height: 25px;
  background-color: #92CCDA;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  }
  li:hover ul.menuLevel1 {
  display: block;
  position: absolute;
  }
  .menuLevel2 {
  display: none;
  }
  .itemLevel2{
  display: block;
  width: 120px;
  height: 25px;
  background-color: #92CCDA;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  }
  .menuLevel1 li:hover ul.menuLevel2{
  display:block;
  position: absolute;
  left:100%;
  }
  </code></pre>