垂直マルチレベルのメニュー、次のレベルは、この画像は縦メニューを示しているホバー

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>