如何將子菜單對齊到容器左側

Question

我有一個子菜單，其行爲如下：http://jsfiddle.net/jy8vz/2/。

所以，這就是我現在所擁有的：（https://www.dropbox.com/s/2b3utr4wmhcnivc/before.jpg）。

我想要一個子菜單，如下所示：（https://www.dropbox.com/s/pvam9nz68fml4da/after.jpg）。

HTML：

<div id="mainWrapMenu"> 
<!-- MenuBar --> 
<div id="menuBarWrap"> 
    <div id="menuBar"> 
     <ul class="mainNav"> 
      <li><a href="index.html">Prima Pagina</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Click pentru a ajunge pe pagina principala in pozitia initiala.</li> 
       </ul> 
      </li> 
      <li><a href="servicii.html">Servicii</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Click pentru a va familiariza cu serviciile pe care salonul nostru vi le pune la dispozitie.</li> 
       </ul> 
      </li> 
      <li><a href="cursuri.html">Cursuri</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Scoala de formare.</li> 
       </ul> 
      </li> 
      <li><a href="promotii.html">Promotii</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Aici poti afla promotiile si ofertele pe care ti le punem la dispozitie. Oricine poate beneficia de acestea.</li> 
       </ul> 
      </li> 
      <li><a href="galeriefoto.html">Galerie Foto</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Portofoliul Salonului Estetique Studio.</li> 
       </ul> 
      </li> 
      <li><a href="contact.html">Contact</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Unde ne puteti gasi si cum ne puteti contacta.</li> 
       </ul> 
      </li> 
      <li><a href="facebook.html">Facebook</a> 
       <ul class="subNav"> 
        <li class="subNavStyle">Pentru actualizari in timp real, ne puteti urmari progresul pe Facebook.</li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 
<div id="clear"></div> 
<!-- END MenuBar --> 
</div> 

CSS：

#mainWrapMenu { 
    width:1000px; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background:#FFF; 
} 


#menuBarWrap { 
    width:auto; 
    height:52px; 
} 

#menuBar { 
    width:auto; 
    position:fixed; 
} 

.mainNav { 
    list-style-type:none; 
    padding:0; 
    margin:0; 
    text-align:center; 
} 
.mainNav ul { 
    padding:0; 
    margin:0; 
} 
.mainNav li { 
    float:left; 
    width:142px; 
    position:relative; 
} 
.mainNav a { 
    text-decoration:none; 
    color:#666; 
    font-size:20px; 
    display:block; 
    line-height:52px; 
    background:url(images/buttonBgrd.jpg); 
} 
.mainNav a:hover { 
    background:url(images/buttonBgrdHover.png); 
    color:#fc951e; 
} 

.subNav { 
    display:none; 
    text-align:center; 
} 
.subNav li { 
    width:1000px; 
    background:#fc951e; 
} 
li:hover .subNav { 
    display:block; 
} 
.subNavStyle { 
    list-style-type:none; 
    text-align:center; 
} 

我怎樣才能得到想要的結果呢？

Answer 1

您需要調整這些CSS類，妥善處理定位（基本上要定位subNav（.mainNav ul）絕對相對於.mainNav不是個別.mainNav li的）

.mainNav { 
    /*add this*/ 
    position: relative 
} 
.mainNav li { 
    /*remove this position: relative; and optionally add the position:static*/ 
    position: static; 
} 
.mainNav ul { 
    /*add these*/ 
    position: absolute; 
    left: 0; 
} 

活生生的例子：JSFIDDLE