CSS Z轴索引，浮动在主菜单上方的下拉箭头

我在网站上实现了两个独立的可折叠菜单脚本，第二个菜单是一个可折叠的信息显示，当信息菜单打开时，它有一个旋转的箭头，箭头本身会浮在其他所有内容之上，即使主下拉菜单覆盖了它。我已经搞砸了这两个项目的z索引，但不知道如何修复它。我已经附上了相关代码以及问题区域的照片。

这是我的汉堡主菜单的CSS和左上角的按钮

/* [ON BIG SCREENS] */
/* (A) WRAPPER */
#hamnav {
  width: 100%;
  background: #333333;
  /* Optional */
  top: 0;
  position: fixed;
  border-bottom: 1px solid #999999;
}

/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex;
z-index:100;
}
#hamitems a {
  flex-grow: 1;
  flex-basis: 0;
  padding: 5px;
  color: #D5DBDB;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
        line-height: 20px;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  border-bottom: 1px solid #666666;
  font-family; Verdana;
        z-index:100;
}
#hamitems a:hover {
  background: #999999;
  color: #D5DBDB;
}

/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #999999;
    font-family: Verdana;
                z-index:100;

  }

  /* (B) SHOW HAMBURGER ICON */
  #hamnav label {
    display: inline-block;
    color: #FFFFFF;
    background: #333333;
    font-style: normal;
    font-size: 2.0em;
    padding: 5px;
                padding-left: 12px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }

}

/* [DOES NOT MATTER] */
html, body {
  padding: 0;
  margin: 0;
  color: #FFFFFF;
  background-color: #000000;
  bgcolor: #000000;
}

这是我的CSS为可折叠的信息菜单，它显示子弹上方浮动的主菜单时，我下降。没有其他浮动以上的主菜单。

input[type='checkbox'] {
                        display: none;
                        }
                        
                        .wrap-collabsible {
                        margin: 10px 5px 20px 5px; }
    
                        
                        .lbl-toggle {
                        display: block;
                        font-weight: bold;
                        font-family: monospace;
                        font-size: 1.2rem;
                        text-transform: uppercase;
                        text-align: center;
                        padding: 1rem;
                        color: #DDD;
                        background: #000000;
                        cursor: pointer;
                        border-radius: 7px;
                        transition:
                        all 0.25s ease-out;
                        }
                        
                        .lbl-toggle:hover {
                        color: #FFF;
                        }
                        
                        .lbl-toggle::before {
                        content: ' ';
                        display: inline-block;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid currentColor;
                        vertical-align: middle;
                        margin-right: .7rem;
                        transform: translateY(-2px);
                        transition: transform .2s ease-out;
                        }
                        
                        .toggle:checked+.lbl-toggle::before {
                        transform: rotate(90deg) translateX(-3px);
                        }
                        
                        .collapsible-content {
                        max-height: 0px;
                        overflow: hidden;
                        transition: max-height .25s ease-in-out;
                        }
                        
                        
                        .toggle:checked + .lbl-toggle + .collapsible-content {
                        max-height: 5000px;
                        }
                        
                        .toggle:checked+.lbl-toggle {
                        border-bottom-right-radius: 0;
                        border-bottom-left-radius: 0;
                        }
                        
                        .collapsible-content .content-inner {
                        background: #000000;
                        border-bottom: 1px solid #FFFFFF;
                        border-bottom-left-radius: 7px;
                        border-bottom-right-radius: 7px;
                        padding: .5rem 1rem;
                        }
                        
                        .collapsible-content p {
                        margin-bottom: 0;
                        font-size: 15px;
                        font-family: Verdana;
                        margin-left: auto; 
                        margin-right: auto;
                        text-align: justify;
                        line-height: 25px;
                    }

这是所要求的标记，这将打印可折叠信息菜单，带有麻烦的圆点（复选框）

if (isset($v) && $v==1){
            
            
            
       echo "<div class='wrap-collabsible'>";
       echo "<input id='collapsible' class='toggle' type='checkbox'>";
       echo "<label for='collapsible' class='lbl-toggle'>Alphabetical name jump</label>";
            echo "<div class='collapsible-content'>";
                echo "<div class='content-inner'>";
                    echo "<p>";
                    
                    
                    
                    
        $sql = "SELECT user_id, username FROM user_reg ORDER BY username";
        $result = mysqli_query($conn, $sql);
        while($row = mysqli_fetch_array($result, MYSQLI_NUM))
        {
        $id=$row[0];
        $username=$row[1];
        echo "<a href='#$id' class=block>$username</a>";
        echo " ";
        }
        
        
                    echo "</p>";
                echo "</div>";
            echo "</div>";
        echo "</div>";
        
        
        } // END IF V1

这是汉堡菜单，上面显示了令人烦恼的子弹头

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body bgcolor="#000000">
    <!-- (A) MENU WRAPPER -->
    <nav id="hamnav">
      <!-- (B) THE HAMBURGER -->
      <label for="hamburger">&#9776;</label>
      <input type="checkbox" id="hamburger"/>

      <!-- (C) MENU ITEMS -->
      <div id="hamitems">
                             <a href=admin_panel.php?v=8>Unoff, Verif & Photo <?php echo "($total8)"; ?></a>
        <a href=admin_panel.php>Offic, Verif <?php echo "($total)"; ?></a>
                                <a href=admin_panel.php?v=7>Unnoff, Verif, No Photo <?php echo "($total7)"; ?></a>
        <a href=admin_panel.php?v=2>UnVerif <?php echo "($total2)"; ?></a>
        <a href=admin_panel.php?v=1>Active <?php echo "($total1)"; ?></a>
        <a href=admin_panel.php?v=3>Blocked <?php echo "($total3)"; ?></a>
        <a href=admin_panel.php?v=4>Inactive <?php echo "($total4)"; ?></a>
                                <a href=admin_panel.php?v=5>Test Account</a>
                                <a href=admin_panel_orders.php>Orders <?php echo "($total6 new)"; ?></a>
                                <a href=admin_email_log.php?v=7>Remind Log</a>
                                <a href=admin_panel_polls.php>Poll #1 Log <?php echo "($total_poll votes)"; ?></a>
                                <a href=admin_messages.php>Contact Mess <?php echo "($total_mess new)"; ?></a>
                                <a href=admin_refer_friend_log.php>Refer FRND Log <?php echo "($total_log)"; ?></a>
                                <a href=admin-edit-store-items.php>Products <?php echo "($total_products out of stock)"; ?></a>
                                <a href=admin-create-coupon.php>Coupons <?php echo "($total_coup left)"; ?></a>
      </div>
    </nav>

CSS Z轴索引，浮动在主菜单上方的下拉箭头

1条答案

相关问题

热门标签

最新问答