title: how to display navigationMenu div left side of the slider
body: <p>Hi in the below code how to display the navigation menu should be left side of the slider.
  Now it's displaying bottom and center of the slider.But I want to navigation menu should be left side of the slider.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code> &lt;div id="slider"&gt;
        &lt;ul id="images"&gt;
          &lt;li&gt;&lt;img src="img/1.jpg" width="600" height="300" alt="gallery_buildings_one" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/2.jpg" width="600" height="300" alt="gallery_buildings_two" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/3.jpg" width="600" height="300" alt="gallery_buildings_three" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/4.jpg" width="600" height="300" alt="gallery_buildings_four" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/5.jpg" width="600" height="300" alt="gallery_buildings_five" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="img/6.jpg" width="600" height="300" alt="gallery_buildings_six" /&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
       &lt;div id="main"&gt;
  
  &lt;ul id="navigationMenu"&gt;
      &lt;li&gt;
          &lt;a class="home" href="#"&gt;
              &lt;span&gt;Home&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="about" href="#"&gt;
              &lt;span&gt;About&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
           &lt;a class="services" href="#"&gt;
              &lt;span&gt;Services&lt;/span&gt;
           &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="portfolio" href="#"&gt;
              &lt;span&gt;Portfolio&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="contact" href="#"&gt;
              &lt;span&gt;Contact us&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>#navigationMenu li{
      list-style:none;
      height:39px;
      padding:2px;
      width:40px;
      position:left;
  }
  
  #navigationMenu span{
      /* Container properties */
      width:0;
      left:38px;
      padding:0;
      position:absolute;
      overflow:hidden;
  
      /* Text properties */
      font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
      font-size:18px;
      font-weight:bold;
      letter-spacing:0.6px;
      white-space:nowrap;
      line-height:39px;
  
      /* CSS3 Transition: */
      -webkit-transition: 0.25s;
  
      /* Future proofing (these do not work yet): */
      -moz-transition: 0.25s;
      transition: 0.25s;
  }
  
  #navigationMenu a{
      background:url('img/navigation.jpg') no-repeat;
  
      height:39px;
      width:38px;
      display:block;
      position:relative;
  }
  
  
  
  #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  #navigationMenu a:hover{
      text-decoration:none;
  
      /* CSS outer glow with the box-shadow property */
      -moz-box-shadow:0 0 5px #9ddff5;
      -webkit-box-shadow:0 0 5px #9ddff5;
      box-shadow:0 0 5px #9ddff5;
  }
  
  /* Green Button */
  
  #navigationMenu .home { background-position:0 0;}
  #navigationMenu .home:hover {   background-position:0 -39px;}
  #navigationMenu .home span{
      background-color:#7da315;
      color:#3d4f0c;
      text-shadow:1px 1px 0 #99bf31;
  }
  
  /* Blue Button */
  
  #navigationMenu .about { background-position:-38px 0;}
  #navigationMenu .about:hover { background-position:-38px -39px;}
  #navigationMenu .about span{
      background-color:#1e8bb4;
      color:#223a44;
      text-shadow:1px 1px 0 #44a8d0;
  }
  
  /* Orange Button */
  
  #navigationMenu .services { background-position:-76px 0;}
  #navigationMenu .services:hover { background-position:-76px -39px;}
  #navigationMenu .services span{
      background-color:#c86c1f;
      color:#5a3517;
      text-shadow:1px 1px 0 #d28344;
  }
  
  /* Yellow Button */
  
  #navigationMenu .portfolio { background-position:-114px 0;}
  #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  #navigationMenu .portfolio span{
      background-color:#d0a525;
      color:#604e18;
      text-shadow:1px 1px 0 #d8b54b;
  }
  
  /* Purple Button */
  
  #navigationMenu .contact { background-position:-152px 0;}
  #navigationMenu .contact:hover { background-position:-152px -39px;}
  #navigationMenu .contact span{
      background-color:#af1e83;
      color:#460f35;
      text-shadow:1px 1px 0 #d244a6;
  }
  #main{
      margin:0 auto;
      position:relative;
      width:40px;
  }
  #slider { 
    width: 1500px;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 0 0 15px 0;  
  } 
  ul#images {
    margin: 0 15px 10px 0;
    padding: 0;
    position: relative;
  }
  ul#images li {
    display: block;
    overflow: hidden;
    padding: 0;
    float: left;
    width: 300px;
    height: 300px;
    list-style: none;
  }
  </code></pre>