Example I took from here, but from the css and html I deleted parts which are needed for beautification.
HTML should be simple:
<ul> <li> Menu 1 <ul> <li> Menu 1 SubMenu 1 </li> <li> Menu 1 SubMenu 2 </li> <li> Menu 1 SubMenu 3 </li> </ul> </li> <li> Menu 2 <ul> <li> Menu 2 SubMenu 1 </li> <li> Menu 2 SubMenu 2 </li> </ul> </li> <li>Menu 3</li> </ul>
CSS:
ul { list-style: none; //I dont need bullets padding: 0px; //so that submenus are under main menu correctly aligned } ul li { position: relative; float: left; } li ul { display: none; //sub menus will not be displayed } li:hover ul { display: block; //display submenus when mouse is over position: absolute; }
Real life example
-
Menu 1
- Menu 1 SubMenu 1
- Menu 1 SubMenu 2
- Menu 1 SubMenu 3
-
Menu 2
- Menu 2 SubMenu 1
- Menu 2 SubMenu 2
- Menu 3