Question

I wonder if is possible to do this by pure css.

Please check my example http://jsfiddle.net/fantill/72xjU/1/

Now when I hover the menu, the sub menu will show up right next to the hovered menu.

I want to set, all sub menu’s top to match 2 level menu’s top.

--------------------------------------------------
|                                                |
|                                                |
--------------------------------------------------
|         |              |  <- 2nd one is selecting
|/////////|              |  <- top match 1st sub menu top
|         |              |  
----------|              |
          |              |
          |              |
          ----------------

Thank you very much for your advice.

Answer 1

It’s not that complicated. In fact, you just have to remove the position relative from the list elements of the submenu. The updated fiddle ist here:

.MM ul ul li {
   position:static;
}