立式多级菜单，下一级应哈弗

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隐藏的自然环境中。然后，我让每个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>