Question

我正在制作一个三级深度的水平菜单。它适用于第一级和第二级。但是，当您将鼠标悬停在任何第一级或第二级菜单上时，将显示第三个菜单项。

更重要的是，显示第一级菜单中的所有第三级菜单项（所有第二级子菜单）。我不知道如何纠正这个问题（我这样做，但我无法弄清楚这些组合......等等）。

*我意识到我的CSS和HTML很草率（黑色ftw） - 这将在以后修复。我现在主要担心的是让它正常工作。

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

Answer 1

我想出了这个解决方案：

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

Answer 2

我有同样的问题 - 在这里找到解决方案，它对我有用

CSS Drop Down Navigation, 3rd level issue

您需要添加“＆gt;” li：hover和ul之间

ie：li：hover＆gt; UL

三级菜单项始终显示

2 个答案: