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：hover-前 ：

<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> 

ここでは、ユーザーがボタンを置いたときにそれが表示されているものです>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

固定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; &可視性：可視;働いた。