Creating a three level inline ul in bootstrap-CodePudding

I am using following html code to create a three level inline list. First Level shows by default on page load. When I click on first level menu i.e. 'Courses' it expands and shows second level menus. But when I click on second level menus i.e. 'Computer Courses' or 'Civil Courses', they do not expand to show third level menus. I need immediate help. Thanks in advance for any help.

<ul >          
    <li >
        <a href="#"  data-toggle="dropdown" role="button" aria- 
           haspopup="true" aria-expanded="false">Courses <span ></span></a>
        <ul >
           <li >
              <a href="#"  data-toggle="dropdown" role="button" aria- 
              haspopup="true" aria-expanded="false" >Computer Courses<span ></span> 
              </a>
                 <ul >
                     <li ><a href="#"><i ></i>IT Advance</a>
                     </li>
                     <li ><a href="#"><i ></i>Web Designing</a>
                     </li>
                 </ul>
           </li>
           <li >
             <a href="#"  data-toggle="dropdown" role="button" aria- 
              haspopup="true" aria-expanded="false">Civil Courses<span ></span></a>
              <ul >
                 <li ><a href="#"><i ></i>Civil Survey</a>
                 </li>
                 <li ><a href="#"><i ></i>Quantity Survey</a>
                 </li>
              </ul>
          </li> 
     </ul>
   </li>
</ul>

CodePudding user response：

I'm not sure how twitter-bootstrap works exactly, but I can imagine having multiple <a> tags with href="#"s messes this up. Moreover, your html is not valid (you can have <ul> as a child of another <ul>) and perhaps wrapping a <ul> within an <a> is also not good practise.

Use javascript onclick functions for the expand behaviour, or dive a little deeper into twitter-bootstrap, in case they do support something like this.

P.S. Consult https://validator.w3.org/nu/#textarea to see what html is valid.

CodePudding user response：

In bootstrap, you cannot implement multilevel dropdowns. It is a limitation in bootstrap. If you want to do such implementation either you have to make it custom or you can use https://mdbootstrap.com/