How to Set all children start with same line of main parent - css

Question

I trying to build my own multi dropdown menu, and i encounter this problem and have to ideal how to solve it. The best i get is using margin-left:-100px but it will run out of alignment when dropdown more then level 2.
this is what i try to develop
and this is my BEST solution so far... but NOT what i want
this are my html code
<div id="menuBox">
<li class="mainMenu">home</li>
<li class="mainMenu">about</li>
<li class="mainMenu">product
<ul class="w200">
<li>money maker</li>
<li>personal coarch
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
<li class="mainMenu">consult</li>
<li class="mainMenu">contact</li>
</div>
this is my CSS setting
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li{
background:#CCCCCC;
cursor:pointer;
}
ul{
float:left;
position:absolute;
z-index:999;
list-style:none;
}
ul>li{
padding:5px 20px;
}
So which/how should i modify my code?

Answer 1

First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements.
Try with this CSS
#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
padding:0;
margin:0;
}
#menuBox{
white-space:nowrap;
list-style:none;
font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
}
#menuBox li{ /*all li elements*/
position:relative;
background:#CCCCCC;
cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
background:black;
color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
color:black; /*hide all submenus*/
padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
z-index:999;
list-style:none;
position:absolute;
top:80%;
left:50%;
border:1px solid black;
display:none;
}
Demo at http://jsfiddle.net/gaby/g6yX2/

Answer 2

it because in your li.mainMenu padding left is set to 35, remove it.
if you want to keep that padding:
HTML:
<li class="mainMenu"><label>product</label>
<ul class="w200">
<li><label>money maker</label></li>
<li><label>personal coarch</label>
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
CSS:
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 0px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li.mainMenu label {
padding: 0px 35px;
}
Example: http://jsfiddle.net/RaPK9/