Css 始终显示第三级菜单项
我正在制作一个三层深的水平菜单。它的工作原理与第一级和第二级相同。但是，当您将鼠标悬停在任何第一级或第二级菜单上时，将显示第三级菜单项 更重要的是，显示第一级菜单中的所有第三级菜单项（所有第二级子菜单）。我不知道如何纠正这一点（我知道，但我不知道ul-li…等的组合） *我意识到我的CSS和html是草率的（黑色ftw）-这将在以后得到修复。我现在主要关心的是让它正常工作Css 始终显示第三级菜单项,css,Css,我正在制作一个三层深的水平菜单。它的工作原理与第一级和第二级相同。但是，当您将鼠标悬停在任何第一级或第二级菜单上时，将显示第三级菜单项 更重要的是，显示第一级菜单中的所有第三级菜单项（所有第二级子菜单）。我不知道如何纠正这一点（我知道，但我不知道ul-li…等的组合） *我意识到我的CSS和html是草率的（黑色ftw）-这将在以后得到修复。我现在主要关心的是让它正常工作 #menu ul { margin: 0; padding: 0; position:rela
#menu ul {
margin: 0;
padding: 0;
position:relative;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom-style:solid;
border-width:2.3px;
border-color:black;
padding-left:0px;
/*background:url(./images/fillers/vvv.png);*/
}
#menu ul li {
/* position: relative; */
}
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
top: 0;
display: block;
}
#menu li:hover ul {
display: block;
}
#menu li:hover ul {
visibility:visible;
}
#menu ul ul {
visibility:hidden;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;
}
/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: white;
padding: 4px;
border: 2.3px solid black;
border-bottom: 0;
}
/* Hover Styles */
#menu ul li:hover, #menu ul li a:focus {
background-color:#5a5a5a;
color:white;
background:url(./images/fillers/vvv.png);
}
/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: white;
text-align:center;
padding: 4px;
border: 2.3px solid black;
border-bottom: 0;
}
/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: white;
}
#menu li ul a.noLink:hover, #menu li ul a.noLink, #menu .noLink, #menu li ul .noLink, #menu li a.noLink {
color: grey;
}
/* Icon Styles */
#menu ul a.submenu {background: url("r_arrow.gif") no-repeat right; }
#menu ul a.submenu:hover {background: url("r_arrow.gif") no-repeat right;}
<div id=menu>
<ul id=menuList>
<li>
<a href="#" name="submenu" class="submenu">Tournaments</a>
<ul>
<li>
<a href="#" name="submenu" class="submenu">2011</a>
<ul>
<li><a href="#"> 1, 2, 3</a></li>
<li><a href="#"> 4, 5, 6</a></li>
<li><a href="#"> 7, 8, 9</a></li>
<li><a href="#"> 10</a></li>
</ul>
</li>
<li>
<a href="#" name="submenu" class="submenu">2012</a>
<ul>
<li><a href="#">Season 1</a></li>
</ul>
</li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a href="#" name="submenu" class="submenu">---</a>
<ul>
<li>
<a href="#" name="submenu" class="submenu">2011</a>
<ul>
<li><a href="#">1, 2, 3</a></li>
</ul>
</li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a class="noLink" name="submenu" class="submenu">Leagues</a>
<ul>
<li><a class="noLink">2011</a></li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
<li><a class="noLink" name="submenu" class="submenu">---</a>
<ul>
<li>
<a class="noLink" name="submenu" class="submenu">2011</a>
<ul>
<li><a class="noLink">---</a></li>
</ul>
</li>
<li><a class="noLink">2012</a></li>
<li><a class="noLink">2013</a></li>
<li><a class="noLink">2014</a></li>
</ul>
</li>
</ul>
</div>
#菜单ul{
保证金：0；
填充：0；
位置：相对位置；
列表样式：无；
宽度：150px；/*菜单项的宽度*/
边框底部样式：实心；
边框宽度：2.3倍；
边框颜色：黑色；
左侧填充：0px；
/*背景：url（./images/fillers/vvv.png）*/
}
#菜单ulli{
/*位置：相对位置*/
}
#菜单li ul{
位置：绝对位置；
左：149px；/*设置为小于菜单宽度1px*/
排名：0；
显示：块；
}
#菜单li：悬停ul{
显示：块；
}
#菜单li：悬停ul{
能见度：可见；
}
#菜单{
可见性：隐藏；
}
/*修复IE。从IE Mac中隐藏\*/
*html#菜单ul li{浮动：左；高度：1%；}
*html#菜单ul li a{高度：1%；}
/*完*/
/*组成syles*/
#菜单ul，li{
保证金：0；
}
/*菜单项的样式*/
#菜单ula{
显示：块；
文字装饰：无；
颜色：白色；
填充：4px；
边框：2.3倍纯黑；
边界底部：0；
}
/*悬停样式*/
#菜单ulli:hover，#菜单ulli a:focus{
背景色：#5A5A；
颜色：白色；
背景：url（./images/fillers/vvv.png）；
}
/*子菜单样式*/
#菜单Liula{
文字装饰：无；
颜色：白色；
文本对齐：居中；
填充：4px；
边框：2.3倍纯黑；
边界底部：0；
}
/*子菜单悬停样式*/
#菜单li ul a：悬停{
颜色：白色；
}
#菜单li ul a.noLink：悬停，#菜单li ul a.noLink，#菜单.noLink，#菜单li ul.noLink，#菜单li a.noLink{
颜色：灰色；
}
/*图标样式*/
#菜单ul a.子菜单{background:url（“r_arrow.gif”）无重复右键；}
#菜单ul a.子菜单：悬停{背景：url（“r_arrow.gif”）无重复右键；}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
我也有同样的问题——在这里找到了解决方案，它对我起了作用 您需要在li:hover和ul之间添加一个“>”
ie:li:hover>ul你能制作一个JSFIDLE来显示问题吗？不是第三级
ul