How to align submenu to the left of container

Question

I have a submenu, that behaves like this: http://jsfiddle.net/jy8vz/2/.

So, this is what I have at this moment: (https://www.dropbox.com/s/2b3utr4wmhcnivc/before.jpg).

I would like a submenu that looks like: (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; 
}

How can I get to the desired result?

Answer 1

You need to adjust these CSS classes to properly handle the positioning (basically you want to position the subNav (.mainNav ul) absolutely relative to the .mainNav not the individual .mainNav li's)

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

Live Example: JSFIDDLE