Scroll to top on click for a sub drop down menu in html

I like to access content from sub drop down menu immediately without using scroll bar on left hand side as shown in the figure using html

Here is the code I used

<div class="col-sm-12">
    <br/>
    <button class="collapsible">Drop Down Main</button>
        <div class="content"><p></p>
     <ul>
        <button class="collapsible">Drop Down-1</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p><b>Line 3</b></p>
        </div>
        </ul>
            
            
        <ul>
        <button class="collapsible">Drop Down-2</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p> <b>Line 3</b></p>   
        </div>
        </ul>
            
        <ul>
          <button class="collapsible">Drop Down-3</button>
        <div class="content"><p></p>
        <p>Line1 </p>
        <p>Line 2</p>
        <p> <b>Line 3</b></p>       
        </div>
        </ul>
            
<ul>
        <button class="collapsible">Drop Down-4</button>
        <div class="content"><p></p>
            <p>Line1 </p>
            <p>Line 2</p>
            <p> <b>Line 3</b></p>       
            </div>
        </ul>   
    </div>
    <br/>

This is the style code I used for drop down and sub drop downs.

.collapsible {
  background-color: #01579b;
  color: white;
  cursor: pointer;
  padding: 18px;
   width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.active, .collapsible:hover {
  background-color: #0043b3;
}
    
.content {
  padding: 0 18px;
  max-height: 0px;
  overflow: auto;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;

}

Please let me know how we can use html to achieve this. Thanks in advance.

from Scroll to top on click for a sub drop down menu in html