Question

我在主菜单中有一个顶级菜单。此顶级菜单有子菜单，但此子菜单无法正常运行。我只能悬停第一个子菜单，其余的则不是。如何解决这个问题？

HTML：

 <div class="top-navigation top-menuv2">
            <ul>
                    <li class="cs cc">&nbsp;Customer Service 02 753 57 11</li>
                    <li><a href="#">Contacts</a></li>
                    <li><a href="#">Our Partners</a>
                        <ul>
                        <li><a href="#">Tangible benefits for retailers</a></li>
                                <li><a href="#/">Retailer Registration Process</a></li>
                    </ul>
                        </li>
                    <li><a href="#">Careers</a>
                    <ul>
                        <li><a href="#">A Career with Home Credit</a></li>
                                <li><a href="#">Recruitment Process</a></li>
                        <li><a href="#">Vacancies</a></li>
                                <li><a href="#">Corporate Culture</a></li>
                    </ul>
                </li>
            </ul>
            </div>

CSS：

 .top-menuv2 ul{ list-style-type: none; margin: 10px 20px 0 700px; font-size: 0.80em; float: none; }
 .top-menuv2 ul li{ display: inline; margin-right: 20px; font-family: 'Open Sans Bold', sans-serif; line-height: 1.8; }
 .top-menuv2 a{ color: black; }
 .top-menuv2 .top-navigation{ text-align: center; }
 .top-menuv2 ul li > a:hover{ color: #555; text-decoration: underline; }
 .top-menuv2 li:hover > ul {display: block; }
 .top-menuv2 ul li > a:active{ color: #d31716; }
 .top-menuv2 li{ display: inline-block;  position: relative; }
 .top-menuv2 li > ul { position: absolute; right: -50%; top: 20%; width: auto; display: none; white-space: nowrap; }
 .top-menuv2 > li > ul { top: auto; right: -50%; width: 100%; }
 .top-menuv2 li > a:after{ margin-left: 5px; content: '\f107'; font-family: FontAwesome; }
 .top-menuv2 > li > a:after{ margin-left: 5px; content: '\f107'; font-family: FontAwesome; }
 .top-menuv2 li > a:only-child:after{ margin-left: 0; content: ''; }
 .top-menuv2 li > ul > li{ display: block; }

Answer 1

您必须更改.top-menuv2 li > ul的z-index。将z-index: 99;添加到.top-menuv2 li > ul。因为默认情况下#site-navigation .menu > ul > li会转到顶部菜单li。

子菜单未正确显示

1 个答案: