垂直多级菜单，下一级应显示在悬停上

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内容隐藏起来了。然后，我让每一个正在徘徊的LI儿童的UL展示自己。

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>