Выпадающий список CSS не отображается правильно, вниз - невидимо

Question

Я разместил раскрывающееся меню в мобильном приложении. Выпадающая кнопка работает правильно, а раскрывающийся контент/ссылки можно щелкнуть, как ожидалось. Проблема заключается в том, что раскрывающийся контент/ссылки невидимы для пользователя.

У меня есть поиск по всему миру для ответа и я попытался переписать свой код во всех моих листах. Моя отладка показывает, что навигация по-прежнему работает правильно, без ошибок.

Я приложил мой код:

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

Answer 1

удалите непрозрачность для .dropdown-content. делая вид

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

Answer 2

Fixed 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; & видимость: видимая; работал.