jquery - 垂直多级菜单，悬停时应显示下一级

Question

这张图片显示的是垂直菜单，但它是展开的，我首先只需要父标签，悬停时应该显示下一级，依此类推

function display_children($parent, $level, $categoryModel) {

    $result = $categoryModel->get_category($parent);
    echo "<ul>";
    foreach ($result as $row) :
        if ($row['Count'] > 0) {
            echo "<li><a href='" . base_url() . "/index.php/advertisement/category/" . $row['category_id'] . "'>" . $row['category_name'] . "</a>";
            display_children($row['category_id'], $level + 1, $categoryModel);
            echo "</li>";
        } elseif ($row['Count'] == 0) {
            echo "<li><a href='" . base_url() . "/index.php/advertisement/category/" . $row['category_id'] . "'>" . $row['category_name'] . "</a></li>";
        } 
            else;
    endforeach;
    echo "</ul>";
}

这是我需要 CSS 的代码。这是递归逻辑，这就是我感到困惑的原因。我发现了很多 css，但它有水平菜单列表。我需要垂直菜单列表。

Answer 1

在这里，我做了一个随机列表。这里的技巧是使用 CSS 级联来发挥我们的优势。我已经让每个 UL 都自然隐藏在另一个 UL 中。然后我让每一个 UL 都是悬停的 LI 的确切子代。

ul{
/*If bullets are outside, hover effect will flicker.*/
list-style-position:inside;
}

ul ul{
display:none;
}

li:hover>ul{
display:block;
}

<ul>
  <li>
    A
    <ul>
      <li>B</li>
      <li>C</li>
    </ul>
  </li>
  <li>
  D
    <ul>
      <li>
      E
        <ul>
          <li>F</li>
          <li>
          G
            <ul>
              <li>H</li>
              <li>I</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
      J
        <ul>
          <li>K</li>
          <li>L</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>