Why can't I see the submenu from links that are left to the one I selected?

I suppose this one might be easy for you css gurus :) I am trying to apply some css to a page that I am currently working on where I want to have a dropline menu. I got the code from here and just did minor modifications (width of the outer ul, class instead of id for the outer ul and z-index instead of huge negative indentation)

As I see there is some misunderstanding, here is some more detail about how this menu should work:

There are two levels, one on the top and the other underneath.
The currently selected link from the top menu will have the css-class "current" attached to the li-element that contains that link. (I use the MVC SiteMapProvider for that, but this should not matter for this question)
The submenu that is associated with that "current" top menu should be displayed by default,
but it should be overlapped by another submenu if the user hovers over the link to another top menu.

(hope that clarifies it a bit)

This is the markup I am using:

<ul class="mainMenu">
  <li>
    <a href="#">Link1</a>
    <ul>
      <li>
      <a href="#">Sub1</a>
      </li>
      <li>
      <a href="#">Sub1</a>
      </li>
      <li>
      <a href="#">Sub1</a>
      </li>
    </ul>
  </li>
  <li class="current">
    <a href="#">Link2</a>
    <ul>
      <li>
      <a href="#">Sub2</a>
      </li>
      <li>
      <a href="#">Sub2</a>
      </li>
      <li>
      <a href="#">Sub2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link3</a>
    <ul>
      <li>
      <a href="#">Sub3</a>
      </li>
      <li>
      <a href="#">Sub3</a>
      </li>
      <li>
      <a href="#">Sub3</a>
      </li>
    </ul>
  </li>
</ul>

and it uses these styles:

* {
    margin:0;
    padding:0;
}
.mainMenu {
    list-style:none;
    height:3.8em;
    position:relative;
    line-height:1.4em;
}
.mainMenu li {
    width:136px;
    float:left;
    text-align:center;
}
.mainMenu a {
    height:1.5em;
    display:block;
    text-decoration:none;
    color:#000;
    background:#999;
}
.mainMenu li.current ul li.current a, .mainMenu li.current a div, .mainMenu a:active, .mainMenu a:focus, .mainMenu a:hover {
    background:#777;
}
/* --------- Sub Nav --------- */
.mainMenu li.current ul {
    left:0;
}
.mainMenu ul {
    position:absolute;
    left: 0;
    z-index: 1;

    width:408px;
    list-style:none;
    padding:.9em 0 0;
}
.mainMenu ul li {
    width:auto;
    margin:0 15px 0 0;
}
.mainMenu ul a {
    font-size:80%;
    height:auto;
    padding:0 8px;
}
.mainMenu li.current ul, .mainMenu li:hover ul { 
    z-index: 10;

    background:#fff;
}

See also here for a fiddle that includes both already. In general this seems to work pretty well, BUT when I hover to the right (i.e. Link1) I cannot see the corresponding links from the submenu though it works when I hover to the right (i.e. Link3). Anyone got an idea why this is the case?

ps: I also do not know why the current node is not applying the style from

.mainMenu li.current ul

(at least I do not see it in firefox 17.0.1, though, when not in the fiddle itself I do not have that problem, so probably a minor issue and not my main question here)

Solution

Just add a bit of CSS :

.mainMenu ul {
    display: none;
}

.mainMenu li:hover > ul {
    display: block;
}

Example

EDIT

Just change or remove z-index in .mainMenu li.current:hover ul. Fiddle