CSS垂直菜单，带水平子菜单 [英] CSS Vertical menu with horizontal submenu

问题描述

我知道这是一个相当常见的问题，但我一直在麻烦找到这个问题的确切答案。

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

  x 
xxx 
x 
x 
x 
  
 
 
 
但是现在看起来像这样：
  x 
x 
 xx 
x 
x 
  
子菜单在下面的一行，它应该在另一个项目的顶部。希望这很清楚
 
 
 
我的html是：
  ; ul id =mainmenu> 
< li id =liHomeclass =active> 
< a href =＃item-x1y1class =panel =noneid =Home>首页< / a> 
< / li> 
< li id =liServicesclass => 
< a href =＃item-x1y2class =panel =SubMenuY2id =Services> Services< / a> 
< ul style =id =SubMenuY2class =submenu> 
< li>< a href =＃>子项目1< / a>< / li> 
< li>< a href =＃>子项目2< / a>< / li> 
< / ul> 
< / li> 
< li id =liEnvironment> 
< a href =＃item-x1y3class =panel =noneid =Environment>环境< / a> 
< / li> 
< li id =liCareer> 
< a href =＃item-x1y4class =panel =noneid =Career> Career< / a> 
< / li> 
< li id =liContact> 
< a href =＃item-x1y5class =panel =noneid =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 
} 
  
 
 
解决方案
我删除了一些您的样式，并留下了定位的东西，所以更清楚：
  #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 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
}

解决方案
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.

                        
这篇关于CSS垂直菜单，带水平子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！