CSS水平子菜單垂直菜單

Question

我知道這是一個相當常見的問題，但我一直在找到問題的確切答案的麻煩。

我想要的菜單是由點組成的。這些點是垂直的。這些點的文本將在稍後添加，所以現在不要介意。我想要一個子菜單給這些點。這個子菜單應該是水平的。最好的說明如下。

x 
x x x 
x 
x 
x 

但現在它看起來像這樣：

x 
x 
xx 
x 
x 

所以，子菜單下面是一排在它應該在其他項目上。希望這是明確的

的HTML我有是：

  <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 

而CSS是：

#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

我剝去你的一些造型的東西，離開了定位的東西，所以它更清晰：

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

我還添加了一些代碼來處理鼠標懸停。