html - 我的下拉菜单显示在 Bootstrap 的轮播元素后面

Question

This is the image i use jumbotron class for just showing dropdown menu

这是我的导航代码

 <ul>
   <li><a href="index.php" style="text-decoration: none;">Home</a></li>
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" role="button">
       Men <span class='caret'></span>
     </a>
      <ul class="dropdown-menu">
      <?php 
      $cat_sql = "SELECT * FROM category";
      $cat_run = mysqli_query($conn, $cat_sql);
      if(false === $cat_run){
        echo mysqli_error($conn);
      }
      while($cat_row = mysqli_fetch_assoc($cat_run)) {
        $cat_name = ucwords($cat_row['cat_name']);
        echo"
          <li><a href='men_watches.php?category=$cat_name'><div>$cat_name</div></a></li> 
          ";
      }
      ?>
      </ul>
    </li>
  </ul>

如果 z-index 是解决方案，请指导我该怎么做，然后指导我如何正确使用它。这是我的 css 代码。我是编程新手，请帮助我。

 nav{
            background: black;
            width: 100%;
            height: 70px;
            line-height: 70px;
            color: white;
            font-family: Verdana, Geneva, arial, sans-serif;
            opacity: 0.9;

        }
        nav h1{
            font-weight: 400;
            float: left;
        }
        nav ul{
            padding-left: 20px;
            float: left;
            margin-right: 20px;

        }
        nav ul li{
            list-style-type: none;
            display: inline-block;



        }
        nav ul li:hover{
            background:   orange;
            transition: all 0.40s;

        }
        nav ul li a{
            color: white;
            padding: 30px;
            font-family: arial;
            font-weight: bold;
            font-size: 16px;        
        }
        .dropdown-menu li a:hover{
                    color: orange;
                 text-decoration: ;   


                }

Answer 1

尝试:

li.dropdown {z-index: 98}
li.dropdown ul {z-index: 99;}