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>

以下是用户悬停按钮时显示的内容：在悬停之前 - ＆gt; 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; ＆安培;能见度：可见;工作

CSS下拉列表显示不正确，下拉列表是不可见的

2 个答案: