FIDDLE: http://jsfiddle.net/4CGwe/1/
markup should respect this scheme:
#BLABLA > ul > li > a #BLABLA > ul > li > ul > li > ul > li > ul > li > a
(every <LI> should contain <A> and optionally <UL>)
here is the CSS:
#BLABLA ul {list-style:none;margin:0;padding:0;display:none;} #BLABLA li {position:relative;} #BLABLA a {border:2px red outset;padding:10px 30px;display:block;} /* by default only the first level menu is visible */ #BLABLA > ul {display:block;} /* by default hovering a item will try to show its own sub-menu */ #BLABLA li:hover > ul {display:block;} /* any submenu (2,3,4 level) is absolute */ #BLABLA ul ul {position:absolute;} /* FIRST LEVEL MENU */ #BLABLA > ul > li {float:left;} #BLABLA > ul > li > a {background:orange;} /* SECOND LEVEL MENU */ #BLABLA > ul > li > ul {top:100%;left:0;} #BLABLA > ul > li > ul > li > a {background:pink;} /* THIRD LEVEL MENU */ #BLABLA > ul > li > ul > li > ul {left:100%;top:0;width:900px;} /* sadly here you have to set manually a huge width */ #BLABLA > ul > li > ul > li > ul > li {float:left;} #BLABLA > ul > li > ul > li > ul > li > a {background:gold;} /* FOURTH LEVEL MENU */ #BLABLA > ul > li > ul > li > ul > li > ul > li > a {background:lightblue;}
PS: tell me if you are interested to alternatives to set width:900px
