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?

JRulle · Accepted Answer · 2014-07-14T19:28:23.920

5

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

edited Jul 14 '14 at 19:28

answered Jul 14 '14 at 18:16

JRulle

7,448
6
39
61

I did exactly this and look how it looks on the website: [link](http://estetiquestudio.com/test/) – Daniel Jul 14 '14 at 19:13
You made `.mainNav li` `position: absolute;` it should not have any positioning declared or it should be `position: static;`. – JRulle Jul 14 '14 at 19:18
I would like to say that even comparing I did not see that difference. Thank you JRulle for the patience. – Daniel Jul 14 '14 at 19:23
No problem... just a little additonal FYI... your seven li elements of 142px width will not fill the 1000px wide area (you will actually be short 6 pixels). this is causing your white space on the right hand side of the menu li elements – JRulle Jul 14 '14 at 19:26
Yes... That I know... will fix it with 142.86px lol. Any other better ideas? As I guess there must be some tricks maybe. – Daniel Jul 14 '14 at 19:28
Take a look at this question: [**decimals in css width**](http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected) -- in my opinion, percentages may be a better way to go here (14.2857%) – JRulle Jul 14 '14 at 19:31

How to align submenu to the left of container

1 Answers1