title: How to make a responsive bar out of a dynamic values coming from the database
body: <p>Good day! I'm having a problem doing a responsive navigation bar coming from HTML, PHP, and CSS only. (No DIVS/Navbar) As you can see below in the OUTPUT image. WHen I used a mobile phone or resize my browser into smaller one. It will output my values like in the OUTPUT image. What I want is to when I use mobile or just make my browser smaller. There will be a button containing all the values and hwen its clicked. it will breakdown all my values like this. This is an example of my desired output. Please see my desired output<br>
  <a href="https://i.stack.imgur.com/twjjP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/twjjP.png" alt="enter image description here"></a></p>
  
  <p>Here's my CSS
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f8f8;
  }
   
  ul li {
    display: block;
    position: relative;
    float: left;
    background: #f8f8f8;
  }
   
  /* This hides the dropdowns */
   
   
  li ul { display: none; }
   
  ul li a {
    display: block;
    padding: 1em;
    text-decoration: none;
    white-space: nowrap;
    color: #000000;
  }
   
  ul li a:hover { background: #e4e3e3; }
   
  /* Display the dropdown */
   
   
  li:hover &gt; ul {
    display: block;
    position: absolute;
  }
   
  li:hover li { float: none; }
   
  li:hover a { background: #f8f8f8; }
   
  li:hover li a:hover { background: #e4e3e3; }
   
  .main-navigation li ul li { 
  color: black;
  position: relative !important; 
  z-index: 9999 !important;
  
    border-top: 0; }
   
  /* Displays second level dropdowns to the right of the first level dropdown */
   
   
  ul ul ul {
    left: 100%;
    top: 0;
  }
   
  /* Simple clearfix */
  
  ul:before,
  ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }
   
  ul:after { clear: both; }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my HTML, PHP Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php 
  function get_menu_tree($parentID) 
  {
   global $con;
   $menu = "";
   $sqlquery = " SELECT * FROM category where parentID='" .$parentID . "' ";
   $res=mysqli_query($con,$sqlquery);
  
      while($row=mysqli_fetch_array($res,MYSQLI_ASSOC)) 
   {
             
             $menu .="&lt;li&gt;&lt;a href='base?page=post&amp;categoryID=".$row['categoryID']."'&gt;".$row['name']."&lt;/a&gt;";  
  
       $menu .= "&lt;ul&gt;".get_menu_tree($row['categoryID'])."&lt;/ul&gt;"; //call  recursively     
        $menu .= "&lt;/li&gt;";
      }
      return $menu;  
  } 
  ?&gt; 
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's how I call the function from my HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
  &lt;div class="container"&gt;
    &lt;ul class="main-navigation"&gt;
  
    &lt;?php echo get_menu_tree(0); ?&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This my DATABASE structure<br><a href="https://i.stack.imgur.com/8I0sD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8I0sD.png" alt="enter image description here"></a></p>
  
  <p>This is my OUTPUT out of the following codes<br><a href="https://i.stack.imgur.com/ylGf8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ylGf8.png" alt="enter image description here"></a></p>