CSS 垂直菜单和水平子菜单答案

【问题标题】：CSS Vertical menu with horizontal submenuCSS 垂直菜单和水平子菜单
【发布时间】：2011-05-10 18:51:03
【问题描述】：

我知道这是一个非常常见的问题，但我一直无法找到该问题的确切答案。

我想要的菜单是由点组成的。这些点是垂直的。这些点的文本将在稍后添加，所以现在不要介意。我想要其中一些点的子菜单。这个子菜单应该是水平的。最好的说明如下。

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
}

【问题讨论】：

标签： html css menu html-lists

【解决方案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;
}

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

【讨论】：