CSS下拉菜單不能正常顯示，下拉菜單不可見

我已經在移動用戶的應用程序中添加了一個下拉菜單。下拉按鈕工作正常，下拉內容/鏈接可按預期點擊。問題在於下拉內容/鏈接對用戶是不可見的。CSS下拉菜單不能正常顯示，下拉菜單不可見

我有搜索無處不在的答案，並試圖重寫我的代碼在我所有的眼鏡牀單。我的調試顯示導航仍然正常工作，沒有錯誤。

我們已經附上我的代碼：

HTML：

<!--Implementing mobile friendly nav--> 
<center> 
    <div class="mobileShow"> 
    <div class="dropdown"> 
     <button class="dropbtn">...</button> 
     <div class="dropdown-content"> 
      <?php $this->widget('zii.widgets.CMenu',array(
      'items'=>array(
       array('label'=>'DASHBOARD', 'url'=>array('/site/index')), 
       array('label'=>'VIDEOS', 'url'=>array('/site/videos')), 
       array('label'=>'CONTACT', 'url'=>array('/site/contact')), 
       array('label'=>'REGISTER', 'url'=>array('site/register'), 'visible'=>Yii::app()->user->isGuest), 
       array('label'=>'LOGIN', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest), 
      array('label'=>'LOGOUT', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)), 
      )); 
      ?> 
     </div> 
     </div> 
    </div> 
</center>

CSS：

<style type="text/css"> 
@media only screen and (max-width: 2000px){ .mobileShow { display: none;}} 
@media only screen and (max-width: 650px){ .mobileShow { display: block;}} 
.dropbtn { 
    display: block; 
    position: relative; 
    width: 100%; 
    background-color: #009999; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
    z-index: 9999; 
} 
.dropbtn:hover { 
    position: relative; 
    display: block; 
    background-color:#00b3b3; 
    transition: 0.3s; 
} 
.dropdown:hover .dropdown-content { 
    clear:both; 
    right: 0; 
    position: relative; 
    display: block; 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:460px; 
    height: 200px; 
} 
</style>

下面是當用戶將鼠標懸停在按鈕它是什麼顯示：之前hover- >https://i.stack.imgur.com/eljyg.png 懸停後 - >https://i.stack.imgur.com/fzfWq.png

來源

2017-01-02 Student101

你能提供一個工作小提琴嗎？ –

刪除.dropdown內容的不透明度。使它看起來

.dropdown-content { 
    background-color: #fff; 
    margin: 0; 
    display: none; 
    min-width: 100px; 
    max-height: 650px; 
    overflow-y: auto; 
    /* opacity: 0; */ 
    position: absolute; 
    z-index: 999; 
    will-change: width, height; 
}

來源

2017-01-02 14:21:16

嗨夥計，只是想出了自己。通過添加以下內容不透明度：1; 知名度：可見; – Student101

很好去...... –

固定CSS：

<style type="text/css"> 
@media only screen and (max-width: 2000px){ .mobileShow { display: none;}} 
@media only screen and (max-width: 650px){ .mobileShow { display: block;}} 
.dropbtn { 
    display: block; 
    position: relative; 
    width: 100%; 
    background-color: #009999; 
    color: white; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
    z-index: 9999; 
} 
.dropbtn:hover { 
    position: relative; 
    display: block; 
    background-color:#00b3b3; 
    transition: 0.3s; 
} 
.dropdown:hover .dropdown-content { 
    clear:both; 
    right: 0; 
    position: relative; 
    display: block; 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:460px; 
    height: 200px; 
    opacity: 1; 
    visibility: visible; 
} 
</style>

添加不透明度：1; &知名度：可見;工作。

來源

2017-01-02 14:38:13 Student101

CSS下拉菜單不能正常顯示，下拉菜單不可見

回答

相關問題