Showing subMenu on hover

Question

I have a menu, which every thing works except of the sub menu. when the <li> with the sub menu is hover its suppose to show a sub menu, and it does. but the problem is with the position of the sub menu, it doesn't show it under the <li> it shows it left: 0% .

http://jsfiddle.net/2fDQz/1/ - Try and put your mouse over the "admin" and the "home".

here is the css(although you can see it in the jsfiddle):

CSS

body {
}
/* Base Styles */
 #personalbar ul, #personalbar li, #personalbar a {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1;
    font-family:'Lato', sans-serif;
}
#personalbar {
    border: 1px solid #123e3f;
    width: auto;
}
#personalbar ul {
    zoom: 1;
    background: #33b3b7;
    background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f));
    background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
    background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
    background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%);
    background: linear-gradient(top, #33b3b7 0%, #288c8f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
    padding: 5px 10px;
}
#personalbar ul:before {
    content:'';
    display: block;
}
#personalbar ul:after {
    content:'';
    display: table;
    clear: both;
}
#personalbar li {
    float: left;
    margin: 0 5px 0 0;
    border: 1px solid transparent;
}
#personalbar li a {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding: 8px 15px 9px 15px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid transparent;
    font-size: 16px;
}
#personalbar li.active {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #33b3b7;
}
#personalbar li.active a {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: block;
    background: #1d6567;
    border: 1px solid #123e3f;
    -moz-box-shadow: inset 0 5px 10px #123e3f;
    -webkit-box-shadow: inset 0 5px 10px #123e3f;
    box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar li:hover {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #33b3b7;
}
#personalbar li:hover a {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: block;
    background: #1d6567;
    border: 1px solid #123e3f;
    -moz-box-shadow: inset 0 5px 10px #123e3f;
    -webkit-box-shadow: inset 0 5px 10px #123e3f;
    box-shadow: inset 0 5px 10px #123e3f;
}
#personalbar ul ul li:hover a, #personalbar li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#personalbar ul ul a:hover {
    background: #7d7d7d;
    color: #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#personalbar li:hover > ul {
    display: block;
}
#personalbar ul ul {
    position:absolute;
    z-index: 1000;
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    top: 40px;
    left: 0;
    background: #ffffff;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#personalbar ul ul li {
    position: relative;
    float: none;
    margin: 0;
    padding: 3px;
}

HTML:

<div id='personalbar' style="position:absolute; top:0%;left:0%; width:100%;">
    <ul>
        <li><a href='# '><span>Home</span></a>

            <ul>
                <li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a>
                </li>
                <li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a>
                </li>
            </ul>
        </li>
        <li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a>
        </li>
        <li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a>
        </li>
        <li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a>

            <ul>
                <li runat="server"><a href="#" runat="server"><span>bla</span></a>
                </li>
                <li runat="server"><a href="#" runat="server"><span>bli</span></a>
                </li>
            </ul>
        </li>
        <li id="L3" runat="server" style="position:absolute; right:1%;"><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a>
        </li>
    </ul>
</div>

I have tried changing the #personalbar ul ul 's position to relative , and here is what is did: http://jsfiddle.net/2fDQz/2/

Answer 1

You need to wrap absolute positioned element inside a position: relative; container...

Demo

#personalbar li {
   float: left;
   margin: 0 5px 0 0;
   position: relative;
   border: 1px solid transparent;
}

---

Note, as pointed by @Amarnath , in the above demo, the menu will collapse as soon you hover the child elements, it's because you are using top: 40px; so get rid of that - Demo

#personalbar ul ul {
    position:absolute;
    z-index: 1000;
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    top: 40px; /* Take this out from here */
    left: 0;
    background: #ffffff;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

---

Also, would like to suggest you, that when you deal with such a markup, it is better to use > selector so that the elements you select via CSS are precise.. If you are not aware of what does that selector do, it selects direct child of the element. For example using something like

ul li ul {
   /* Selects all ul element nested under li */
}

Whereas using something like

ul > li > ul {
   /* Selects direct ul element nested under li - First Level */
}

Answer 2

You need to set all the li 's positions to relative for it to work. Making something position: relative resets the positioning values for any child elements. When using absolute positioning inside a relatively positioned parent, the child (when set to left: 0; top: 0; for example) will position itself to the top left edge of the parent and not the document. A good point to note as well is that the z-index property also resets relative to the parent.

Try this:

 body {} /* Base Styles */ #personalbar ul, #personalbar li, #personalbar a { list-style: none; margin: 0; padding: 0; border: 0; line-height: 1; font-family: 'Lato', sans-serif; } #personalbar { border: 1px solid #123e3f; width: auto; } #personalbar ul { zoom: 1; background: #33b3b7; background: -moz-linear-gradient(top, #33b3b7 0%, #288c8f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #33b3b7), color-stop(100%, #288c8f)); background: -webkit-linear-gradient(top, #33b3b7 0%, #288c8f 100%); background: -o-linear-gradient(top, #33b3b7 0%, #288c8f 100%); background: -ms-linear-gradient(top, #33b3b7 0%, #288c8f 100%); background: linear-gradient(top, #33b3b7 0%, #288c8f 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0); padding: 5px 10px; } #personalbar ul:before { content: ''; display: block; } #personalbar ul:after { content: ''; display: table; clear: both; } #personalbar li { float: left; margin: 0 5px 0 0; border: 1px solid transparent; position: relative; /* This is the important bit */ } #personalbar li a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 8px 15px 9px 15px; display: block; text-decoration: none; color: #ffffff; border: 1px solid transparent; font-size: 16px; } #personalbar li.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #33b3b7; } #personalbar li.active a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: block; background: #1d6567; border: 1px solid #123e3f; -moz-box-shadow: inset 0 5px 10px #123e3f; -webkit-box-shadow: inset 0 5px 10px #123e3f; box-shadow: inset 0 5px 10px #123e3f; } #personalbar li:hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: 1px solid #33b3b7; } #personalbar li:hover a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: block; background: #1d6567; border: 1px solid #123e3f; -moz-box-shadow: inset 0 5px 10px #123e3f; -webkit-box-shadow: inset 0 5px 10px #123e3f; box-shadow: inset 0 5px 10px #123e3f; } #personalbar ul ul li:hover a, #personalbar li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #personalbar ul ul a:hover { background: #7d7d7d; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } #personalbar li:hover > ul { display: block; } #personalbar ul ul { position: absolute; z-index: 1000; display: none; margin: 0; padding: 0; top: 40px; left: 0; background: #ffffff; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } #personalbar ul ul li { position: relative; float: none; margin: 0; padding: 3px; } 

 <div id='personalbar' style="position:absolute; top:0%;left:0%; width:100%;"> <ul> <li><a href='# '><span>Home</span></a> <ul> <li id="Li2" runat="server"><a id="A5" href="#" runat="server"><span>bla</span></a> </li> <li id="Li3" runat="server"><a id="A6" href="#" runat="server"><span>bli</span></a> </li> </ul> </li> <li id="L1" runat="server"><a id="A1" href="../ClientSide/newsFeed/allEr.aspx" runat="server"><span>My Wall</span></a> </li> <li id="L2" runat="server"><a id="A2" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Setting</span></a> </li> <li id="Li1" runat="server"><a id="A4" href="../ClientSide/employee/eeSettings.aspx" runat="server"><span>Admin</span></a> <ul> <li runat="server"><a href="#" runat="server"><span>bla</span></a> </li> <li runat="server"><a href="#" runat="server"><span>bli</span></a> </li> </ul> </li> <li id="L3" runat="server" style="position:absolute; right:1%;"><a id="A3" href="../ClientSide/Registration/registration.aspx" runat="server"><span>Sign Up</span></a> </li> </ul> </div>