title: CSS Horizontal Navigation menu list alignment
body: <p>I am trying to design a menu and submenu like <a href="http://kardan.edu.af/" rel="nofollow noreferrer">this</a>.</p>
  
  <p>I tried to make enhancements in the menu I already have, but it doesn't start from the beginning of the menu. I tried to edit the CSS but I can't figure out where to fix this issue.</p>
  
  <p>Here is the screenshot of the menu I am trying to fix.</p>
  
  <p><img src="https://i.stack.imgur.com/8jxQP.jpg" alt="enter image description here"></p>
  
  <p><strong>The HTML for the menu:</strong></p>
  
  <pre><code>&lt;div style="width:100%; border:1px solid black" align="center"&gt;
  &lt;ul id="nav-one" class="dropmenu" style="width:1024px; border:1px solid black;"&gt; 
              &lt;li&gt; 
                  &lt;a href="#"&gt;Home&lt;/a&gt; 
              &lt;/li&gt; 
              &lt;li&gt; 
                  &lt;a href="#"&gt;ABOUT BOST&lt;/a&gt; 
                  &lt;ul&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Support&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Examples&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Your work&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt; 
              &lt;/li&gt; 
              &lt;li&gt; 
                  &lt;a href="#item3"&gt;Downloadsfdsfsd&lt;/a&gt; 
                  &lt;ul&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Tools&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Office&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Custom projects&lt;/a&gt;&lt;/li&gt; 
                  &lt;/ul&gt; 
              &lt;/li&gt;  
              &lt;li&gt; 
                  &lt;a href="#"&gt;Productsfsdfsdfsd&lt;/a&gt; 
                  &lt;div class="products" align="left"&gt;
                      &lt;ul&gt; 
                          &lt;li&gt;&lt;img src="images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Featured Box&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;img src="images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Mod Rewriter&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;img src="images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Byte Scrambler&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;img src="images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Image Processor&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;img src="images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Registry Class&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;img src="images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Data Validation&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;img src="images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /&gt;&lt;h2&gt;Ajax Tables&lt;/h2&gt;&lt;p&gt;&lt;a href="#"&gt;More information about this product&lt;/a&gt;&lt;/p&gt;&lt;/li&gt; 
                      &lt;/ul&gt;
                      &lt;div class="small"&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt; 
                  &lt;a href="#"&gt;Tutorials&lt;/a&gt; 
                  &lt;div class="tutorials"&gt;
                      &lt;ul class="left"&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;Javascript&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;Python&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;PHP&lt;/a&gt;&lt;/li&gt; 
                      &lt;/ul&gt;
                      &lt;ul class="right"&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;HTML/CSS&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;ASP.NET&lt;/a&gt;&lt;/li&gt; 
                          &lt;li&gt;&lt;a href="#"&gt;Actionscript&lt;/a&gt;&lt;/li&gt; 
                      &lt;/ul&gt;
                      &lt;div class="small"&gt;View &lt;a href="#"&gt;all categories&lt;/a&gt; or a &lt;a href="#"&gt;list of the best tutorials&lt;/a&gt;.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt; 
                  &lt;a href="#"&gt;Links&lt;/a&gt; 
                  &lt;ul&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Programming&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Inspiration&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;My websites&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Cool stuff&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Sitebase&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt; 
                  &lt;/ul&gt; 
              &lt;/li&gt;
              &lt;li&gt; 
                  &lt;a href="#"&gt;Login&lt;/a&gt; 
                  &lt;div class="login"&gt;
                      &lt;label for="txtuser"&gt;Username: &lt;/label&gt;
                      &lt;input type="text" name="txtuser" id="txtuser" /&gt;
                      &lt;label for="txtuser"&gt;Password: &lt;/label&gt;
                      &lt;input type="password" name="txtpass" id="txtpass" /&gt;
                      &lt;button&gt;Login&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/li&gt;           
          &lt;/ul&gt; 
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>and the CSS:</strong></p>
  
  <pre><code>ul, li{
      padding: 0px;
      margin: 0px;
  }
  ul.dropmenu{
      position: relative;
      margin: 0px;
      padding: 1px 0px 0px 0px;
      background:transparent url(images/navigation.png) repeat-x scroll 0 0;
      display:block;
      height: 35px;
      font-family:Verdana,Arial,Helvetica,sans-serif;
      font-size: 12px;
  }
  .dropmenu li{
      position: relative;
      list-style: none;
      float: left;
      margin: 0px;
      padding: 0px;
  }
  .dropmenu li a{
      height: 22px;
      padding: 9px 30px 0px 15px;
      display: block;
      cursor: point;
      border-right: solid 1px #4a779d;
      color: #FFFFFF;
      text-transform: uppercase;
      text-decoration: none;
  }
  .dropmenu li span{
      display: block;
      float: right;
      height: 10px;
      width: 10px;
      background:transparent url(images/arrow_up.png) repeat-x scroll 0 0;
      position: absolute;
      top: 12px;
      right: 10px;
  }
  .dropmenu li  a:hover span{
      background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
  }
  .dropmenu li:hover ul, .dropmenu li:hover div{
      display: block;
  }
  .dropmenu ul{
      position: absolute;
      display: none;
      width: 140px;
      padding: 0px;
      margin: 0px;
      border-bottom: 1px solid #ccc;
      background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
  }
  .dropmenu ul li{
      border: 0;
      float: none;
  }
  .dropmenu ul a {
    border: 1px solid #ccc;
    border-bottom: 0;
    white-space: nowrap;
    display:block;
    color: #0657AD;
    text-decoration: underline;
    text-transform: none;
  }
  a.selected, a:hover{
      color: #0657AD !important;
      background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
  }
  a.selected span{
      background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
  }
  .dropmenu ul a:hover {
      color:#F67A00 !important;
      text-decoration: none;
      background-color: #F0F0F0;
      background-image: none;
  }
  .dropmenu div ul{
      position: relative;
      display: block;
  }
  .dropmenu li div{
      background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
      border: 1px solid #ccc;
      padding: 5px;
      display: none;
      position: absolute;
  }
  .dropmenu li div ul{
      border: none;
      background: none;
      position: relative !important;
  }
  .dropmenu li div a{
      border: none;
      border-bottom: 1px solid #ccc;
  }
  .dropmenu li div div{
      display: block;
      position: relative;
      background: none;
      border: none;
  }
  .dropmenu li div div a{
      display: inline;
      border: none;
      color: #666;
      text-decoration: underline;
      padding: 0px;
      margin: 0px;
      text-transform: none;
  }
  .dropmenu li div div a:hover{
      color: #000;
      text-decoration: none;
  }
  ul.left{
      float:left;
      width: 145px;
  }
  ul.right{
      float:right;
      width: 145px;
  }
  .small{
      color: #666;
      font-size: 10px;
      padding: 10px 5px 8px 5px !important;
      display: block;
      clear: both;
  }
  .products{
      width: 1024px;
      padding: 0px !important;
  }
  .products ul{
      width: 100%;
  }
  .products ul li{
      border-bottom: 1px solid #ccc;
      height: 40px;
      padding: 10px 0px;
  }
  .products h2{
      font-size: 16px;
      padding: 2px 0px 3px 0px;
      margin: 0px;
  }
  .products p{
      color: #666;
      font-size: 10px;
      padding: 0px;
      margin: 0px;
  }
  .products img{
      float: left;
      padding-right: 10px;
  }
  .products  ul li a{
      display: inline;
      border: none;
      color: #666;
      text-decoration: underline;
      padding: 0px;
      margin: 0px;
      text-transform: none;
  }
  .products  ul li  a:hover{
      color: #000 !important;
      text-decoration: none;
      background: none !important;
  }
  
  .tutorials{
      width: 300px;
  }
  
  .login{
      padding: 15px !important;
      width: 180px;
  }
  input{
      border:1px solid #4A779D;
      padding: 3px 8px;
      margin-bottom: 8px;
      width: 164px;
  }
  label{
      padding: 0px 0px 4px 0px;
      display:block;
  }
  button{
      background: #4A779D url(images/navigation.png) repeat-x scroll 0 0;
      color: #FFF;
      border:1px solid #4A779D;
      padding: 4px 10px;
      width: 180px;
  }
  </code></pre>
  
  <p>How do I solve this issue?</p>