컨테이너의 왼쪽에 서브 메뉴를 정렬하는 방법

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

내가 원하는 결과를 어떻게받을 수 있나요? JSFIDDLE :

Answer 1

당신은

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

라이브 예 (기본적으로 당신이 .mainNav이 아닌 개별 .mainNav li 's의 절대적 기준으로 subNav (.mainNav ul)를 배치 할) 제대로 위치를 처리하기 위해 이러한 CSS 클래스를 조정해야