Question

我有一个html下拉菜单。

问题是 1.将鼠标悬停在父菜单项上时，子菜单显示正常。当徘徊在孩子们面前时，这种情况就会消失，使其变得毫无用处。 2.儿童子项目背景颜色不正确，即使我已将其设置为rgba（17,91,164，.6）并添加了！important指令;

HTML

                  <div class="mainMenu" id="mainMenu">
                <ul>
                  <li class="menuItem" id="menuItem1"> <a href="./squadra.html">Squadra</a> </li>
                  <li class="menuItem" id="menuItem2"> <a href="./biglietti.html">Biglietti</a> </li>
                  <li class="menuItem" id="menuItem3"> <a href="sottoscrizioneAbbonamento1.html">Abbonamenti</a> </li>
                  <li class="menuItem" id="menuItem4"> <a href="ritiro.html">Ritiro</a> </li>
                  <li class="menuItem" id="menuItem5"> <a href="fidelityCard.html">Fidelity Card</a> </li>
                  <li class="menuItem active" id="menuItem7"> <span> <a href="account.html">Account</a> </span>

                    <ul class="mainSubMenu">
                        <li class="subMenuItem"><a class="pureCssMenui" href="profilo.html">Profilo</a></li>
                        <li class="subMenuItem"><a class="pureCssMenui" href="datiFatturazione.html">Dati Fatturazione</a></li>
                        <li class="subMenuItem"><a class="pureCssMenui" href="storicoTifoso.html">Storico Tifoso</a></li>
                        <li class="subMenuItem"><a class="pureCssMenui" href="esci.html">Esci</a></li>
                    </ul>


                  </li>
                </ul>
              </div>

CSS

#mainMenu
{
font-size: 0.85em;
padding:10px 0 0px 0;

border:white 2px;
background: rgba(17, 91, 164, .6);
height:50px;

/*overflow:hidden;*/
}

#mainMenu ul
{
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    list-style-type: none;
}



#mainMenu ul li
{

    height:20px;
    float:left;

    text-align:center;
    font-weight:bold;
    font-size:1.7em;
    margin-left:.5em;
    margin-right:.5em;
    max-width:180px;

    padding:15px !important;


}

#mainMenu ul li:hover, #mainMenu ul li.active
{
background: rgba(17, 91, 164, 1);
border-top: rgba(17, 91, 164, 1) 15px;
}

#mainMenu ul li a, #mainMenu ul li span a
{
    color:brown;
    text-decoration:none;
    color:#FFF;

    font-weight:bold;


}

.accountMenuItem
{
    /*margin-left:88px !important;*/

}

.mainSubMenu
{
display:none;

z-index:100!important;
background: rgba(17, 91, 164, 1) !important;
color:black !important;
font-size:1em!important;
}


/*.mainMenu:hover   .mainSubMenu {display:block }*/

.mainMenu ul li:hover > ul{display:block;}
.mainMenu ul li ul li:hover  {display:block;}

#mainMenu ul li ul
{
position: relative;
left:-2px; top:98%;
background: rgba(17, 91, 164, 1) !important;
color:white;
}

#mainMenu ul ul ul
{position: relative; left:98%; top:-2px;}

#mainMenu ul ul
{
    width:119.7px;
}

我做错了什么？有人能帮帮我吗？为方便起见，我上传了示例页面：http://prova.webuda.com/account.html。

我做错了什么？

Answer 1

尝试更改列表中的定位。从您提供的示例中，我可以通过Chrome的DevTools进行以下修改，并且菜单工作正常。我相信您当前的代码是将子菜单定位在屏幕外。父LI需要相对于页面的其余部分，并且子菜单需要绝对定位在父LI内。

#mainMenu ul li {
    position: relative;
}

#mainMenu ul li ul {
    position: absolute;
}

父母Menù项目失去焦点后，SubMenù消失

1 个答案: