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

我还添加了一些代码来处理鼠标悬停。