php - 为什么悬停时显示的元素没有显示在嵌套的 CSS 下拉列表中？

Question

我正在尝试让嵌套的 CSS 下拉菜单正常工作。菜单中的信息是使用数据库中的结果生成的。第一个下拉效果很好；只是当我将鼠标悬停在行上时，什么也没有发生。

谁能看出我哪里出错了？我的理解是，当我将鼠标悬停在类名为 test 的表行(即 <tr> )上时，它应该会在右侧显示类名为 dropcontent2 的元素的，但它不起作用 ><.

下面是我目前得到的图像 - 我试图显示在我悬停的行右侧的“测试”文本，但是它只是显示即使显示属性设置为无。

启动PHP:

if (!empty($result))
  {
            echo "<div class='dropdown'>";
              echo "<span class='label label-success'>Domain Found In History</span>";
                echo " <div class='dropdown-content'>";
                    $this_database->displaySearchResults($result);
                  echo "</div>";
              echo "</div>";
  }

上面调用的PHP函数:

  function displaySearchResults($idArray)
{
  $servername = $this->servername;
  $username = $this->username;
  $password = $this->password;
  $dbname = $this->dbname;
  #Opens the MYSQL Connection
  $conn = mysqli_connect($servername, $username, $password, $dbname);
    if (!$conn)
    {
      die("Connection failed: " . mysqli_connect_error());
    }
    ## Begining of formatting of drop down table
    echo "<table class='table table-condensed'>";
     echo "<tr>";
      echo "<th>Date</th>";
        echo "<th>Time</th>";
          echo "</tr>";
          ##Loops through all the matching ID's
    for ($i = 0; $i < count($idArray); $i++)
    {
        $stmt = $conn->prepare("SELECT * FROM dns WHERE id LIKE '$idArray[$i]' ");
          $stmt->bind_param($idArray[$i]);
            $stmt->execute();
              $result = $stmt->get_result();
              ## For ever matching ID it prints out the date/time into the drop down table
              while($row=$result->fetch_assoc())
              {
                echo "<tr class='test'>";
                  echo "<td>".$row["date"]."</td>";
                    echo "<td>".$row["time"]."</td>";
                        echo "</tr>";
                      echo "<div class='drop2content'>";
                        echo "<tr>";
                          echo "<td>Test </td>";
                              echo "</tr>";
                                echo "</div>";

              }
  }
              echo "</table>";
}

CSS

 /* Show History Drop down Styling */

/* The container <div> - needed to position the dropdown content */
.dropdown
{
   position: relative;
   display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content
{
   display: none;
   position: absolute;
   z-index: 1;
   margin-top:2%;
   background-color:white;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content
{
   display: block;
}

.drop2content
{
  display:none;
  position:absolute;
  background-color:white;
}

.test:hover .drop2content
{
  display:block;
  position:absolute;
  left:100%;
  top:0%;

}
.test > td
 {
  position:relative;
}
.test
{
  position:relative;
}

Answer 1

您需要将position:relative;应用到.test，否则.drop2content会出现在屏幕之外。

.test {
  position:relative;
}

您可能需要执行以下 CSS，具体取决于您想要的结果。

.test > td {
  position:relative;
}