如何顯示導航菜單div滑塊左側

Question

嗨，在下面的代碼中應該如何顯示導航菜單左側的滑塊。 現在它顯示滑塊的底部和中心。但我想要導航菜單應該位於滑塊的左側。

HTML

<div id="slider"> 
     <ul id="images"> 
     <li><img src="img/1.jpg" width="600" height="300" alt="gallery_buildings_one" /></li> 
     <li><img src="img/2.jpg" width="600" height="300" alt="gallery_buildings_two" /></li> 
     <li><img src="img/3.jpg" width="600" height="300" alt="gallery_buildings_three" /></li> 
     <li><img src="img/4.jpg" width="600" height="300" alt="gallery_buildings_four" /></li> 
     <li><img src="img/5.jpg" width="600" height="300" alt="gallery_buildings_five" /></li> 
     <li><img src="img/6.jpg" width="600" height="300" alt="gallery_buildings_six" /></li> 
     </ul> 
     </div> 
    <div id="main"> 

<ul id="navigationMenu"> 
    <li> 
     <a class="home" href="#"> 
      <span>Home</span> 
     </a> 
    </li> 

    <li> 
     <a class="about" href="#"> 
      <span>About</span> 
     </a> 
    </li> 

    <li> 
     <a class="services" href="#"> 
      <span>Services</span> 
     </a> 
    </li> 

    <li> 
     <a class="portfolio" href="#"> 
      <span>Portfolio</span> 
     </a> 
    </li> 

    <li> 
     <a class="contact" href="#"> 
      <span>Contact us</span> 
     </a> 
    </li> 
</ul> 

</div> 

CSS

#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; 
} 

Answer 1

#main { 
     margin: 0; 
     position: relative; 
     width: 40px; 
     float: left; 
     background: #ccc; 
    } 
<div id="main"> 

<ul id="navigationMenu"> 
    <li> 
     <a class="home" href="#"> 
      <span>Home</span> 
     </a> 
    </li> 

    <li> 
     <a class="about" href="#"> 
      <span>About</span> 
     </a> 
    </li> 

    <li> 
     <a class="services" href="#"> 
      <span>Services</span> 
     </a> 
    </li> 

    <li> 
     <a class="portfolio" href="#"> 
      <span>Portfolio</span> 
     </a> 
    </li> 

    <li> 
     <a class="contact" href="#"> 
      <span>Contact us</span> 
     </a> 
    </li> 
</ul> 

</div> 
<div id="slider"> 
     <ul id="images"> 
     <li><img src="img/1.jpg" width="600" height="300" alt="gallery_buildings_one" /></li> 
     <li><img src="img/2.jpg" width="600" height="300" alt="gallery_buildings_two" /></li> 
     <li><img src="img/3.jpg" width="600" height="300" alt="gallery_buildings_three" /></li> 
     <li><img src="img/4.jpg" width="600" height="300" alt="gallery_buildings_four" /></li> 
     <li><img src="img/5.jpg" width="600" height="300" alt="gallery_buildings_five" /></li> 
     <li><img src="img/6.jpg" width="600" height="300" alt="gallery_buildings_six" /></li> 
     </ul> 
     </div> 

Answer 2

#navigationMenu li{ 
    list-style:none; 
    height:39px; 
    padding:2px; 
    width:40px; 
    position:left; 
    } 

取出位置：左; 從CSS 現在更新你的CSS，並添加新

#navigationMenu{ 
float:left; 
position:absolute; 
left:say 100px; 
} 

嘗試