Question

我有一个传统的CSS下拉菜单。然而由于一些奇怪的原因，主要主要的manu之外的下拉部分没有显示。

我包含以下代码。

<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="abbonamenti.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 accountMenuItem" id="menuItem7"> <span> <a href="account.html">Account</a> </span>
         <div>
             <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>
         </div>
       </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;
   background: rgba(17, 91, 164, .6) !important;
   color:black !important;
   font-size:1em!important;
}


.mainMenu:hover   .mainSubMenu {display:block }

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

#mainMenu ul li ul{position: relative; left:-1px; top:98%; background: rgba(17, 91, 164, .6); color:black;}

#mainMenu ul ul ul{position: relative; left:98%; top:-1px;}
#mainMenu ul ul{
    width:119.7px;
}

我做错了什么？有人可以帮帮我吗？

非常感谢你的时间。

Answer 1

它显示 - 只是你的文字与背景颜色相同。为页面添加背景颜色，您将看到菜单和子菜单。（添加：body {background-color：＃999999;}）

它确实需要一点定位和清理，但显示/隐藏正在工作。

Answer 2

在你的CSS上做2件事先给出背景颜色，然后再改变这一行：

.mainMenu:hover   .mainSubMenu {display:block }

to

#menuItem7:hover   .mainSubMenu {display:block }

休息时你可以根据需要调整css。

Answer 3

   <html>
   <head>
   <style>
   #mainMenu ul ul {
display: none;
    }

#mainMenu ul li:hover > ul {
    display: block;
}
#mainMenu{
margin-left:400px;}
   #mainMenu ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table;

    }
#mainMenu ul:after {
    content: ""; clear: both; display: block;
}
    #mainMenu ul li {
float: left;
    }
#mainMenu ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
    #mainMenu ul li:hover a {
        color: #fff;
    }

#mainMenu ul li a {
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
}
    #mainMenu ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
    }
#mainMenu ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
    #mainMenu ul ul li a {
        padding: 15px 40px;
        color: #fff;
    }   
        #mainMenu ul ul li a:hover {
            background:red;
        }
    #mainMenu ul ul ul {
position: absolute; left: 100%; top:0;
  }
</style>
</head>
<body>
      <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="abbonamenti.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</a> </li>






        <li class="menuItem active accountMenuItem" id="menuItem7"> <span> 
         <a  href="account.html">Account</a> </span>

            <ul class="mainSubMenu">
               <li class="subMenuItem"><a class="pureCssMenui" href="prof.html">Profilo</a></li>
        <li class="subMenuItem"><a class="pureCssMenui" href="datiFatturazione.html">Dati /a>/li>
        <li class="subMenuItem"><a class="pureCssMenui"  href="storico\.html">Storico</a></li>
                <li class="subMenuItem"><a class="pureCssMenui" href="esci.html">Esci</a></li>
            </ul>





          </li>
        </ul>
      </div>
    </body>
</html>




  REMOVE div tag in the 2nd ul

Css下拉菜单没有显示

3 个答案: