CSS Menu vertical avec sous-menu horizontal

Question

Je sais que c'est une question assez fréquente, mais j'ai eu des problèmes pour trouver la réponse exacte à ce problème.

Le menu que je veux est composé de points. Ces points sont verticaux. Le texte pour ces points sera ajouté plus tard, alors ne vous en faites pas pour le moment. Je veux un sous-menu pour certains de ces points. Ce sous-menu devrait être horizontal. Meilleur illustré par le ci-dessous.

x 
x x x 
x 
x 
x 

Mais maintenant il ressemble à ceci:

x 
x 
xx 
x 
x 

Ainsi, le sous-menu est une ligne ci-dessous où il se doit au-dessus d'un autre élément. Espérons que cela est clair

Le html que j'ai est:

  <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 

Et le css est:

#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

Je dépouillèrent certains de vos trucs de style et à gauche les trucs de positionnement il est donc clair:

J'ai également ajouté du code pour gérer les survols de la souris.

#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; 
}