CSS ul li, hover from 2nd level

Question

Please help to improve a ul li menu.

Please check my example http://jsfiddle.net/fantill/SBkRk/

Now it is hover-able from the 1st level of menu, but I want it to be hover-able from 2nd level with keep the current hover effect. ( display 1st and 2nd level and hide the remained )

I tired a lot but I couldn't find a way to do that, the hover setting seem will only work from the 1st level due to the position: relative, absolute issue.

Thank you very much for your advice.

Now is like

--------------------
| 1st | 2nd |  3rd |
| ----|-------------
|     |     |
|-----|-----|
|     |
-------

I want it to be like this

1st and 2nd level are always visible
-------
| 1st |
| ----|------
| |2nd| 3rd |
|-----|------
| |2nd|
-------

Answer 1

I have updated your jsfiddle to work how you want. This is updated css:

.MM ul {
  position:absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 2;
}
.MM ul li:hover > ul {
    display:block;
}
.MM ul li {
    position: relative;
  display: block;
}
.MM ul ul {
    display:none;
    position: relative;
    white-space: nowrap;
    top: 0;
    left:0;
}
.MM ul ul ul {
  position: absolute;
    top: 0px;
    left: 100%;
}