CSS Vertical menu with horizontal submenu

Question

I know this is a quite frequent question, but I've been having troubles finding the exact answer to this problem.

The menu I want is consists of dots. These dots are vertical. The text for these dots will be added later, so don't mind that now. I want a submenu to some of these dots. This submenu should be horizontal. Best illustrated by the below.

x
x x x 
x
x
x

But for now it looks like this:

x
x
xx
x
x

So the sub menu is one row below where it should on top of another item. Hope this is clear

The html I have is:

         <ul id="mainmenu">
         <li id="liHome" class="active">
             <a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a>
         </li>
         <li id="liServices" class=" ">
             <a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a>
             <ul style="" id="SubMenuY2" class="submenu">
                 <li><a href="#">Sub-item 1</a></li>
                 <li><a href="#">Sub-item 2</a></li>
             </ul>
         </li>
         <li id="liEnvironment">
             <a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a>
         </li>
         <li id="liCareer">
             <a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a>
         </li>
         <li id="liContact">
             <a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a>
         </li>
     </ul

And the css is:

#mainmenu {
  position: fixed;
  left: 20px;
  top: 50%;
  z-index: 999999;
  margin-top:-200px;
}

  #mainmenu li {
    height: 40px;
    position: relative;
  }

  #mainmenu a {
    display: block;
    width: 40px;
    height: 40px;
    background: url(Images/dotnav.png) 0 100% no-repeat;
 text-indent: -10000px;
    overflow: hidden;
  }


  #mainmenu a:hover,
  #mainmenu li.active a {
    background-position: 0 0;

  }
.submenu
{
    list-style-type: none; 
    position:relative;
    float:left;
}
.submenu li
{
    display: inline; 
    float:left; 
    position:relative
}

Answer 1

I stripped some of your styling stuff and left the positioning stuff so it's clearer:

#mainmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#mainmenu li {
  clear: left;
}

#mainmenu a {
  display: block;
  overflow: hidden;
  float: left;
}

#mainmenu a:hover,
#mainmenu li.active a {
  background-position: 0 0;
}

.submenu {
  list-style-type: none; 
  float: left;
  display: none;
}

#mainmenu li a:hover+.submenu, .submenu:hover {
  display: block;
} 



.submenu li {
  display: inline; 
  clear: none !important;
}

.submenu li a {
  float: left;
  margin-left: 10px;
}

I also added some code to handle the mouse hovers.