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/