I am working on an assignment for school where I have to design a website for a book I am reading. I created a dropdown menu in my navigation bar but when I first load the website and navigate to the bar it appears open after that if I close it or open it stays in that state as it should. I am wondering if there is something I can implement into my code that would have the dropdown menu closed when you load into the website. if you could please help out that would be greatly appreciated.

Here is the code for the navbar segment of my HTML:

div class="item">
                <a class="sub-btn"><i class=""></i>Character Analysis<i class="fas fa-angle-right dropdown"></i></a>
                <div class="sub-menu">
                  <a href="francis.html" class="sub-item">Francis</a>
                  <a href="michael.html" class="sub-item">Michael</a>
                  <a href="aisha.html" class="sub-item">Aisha</a>
                  <a href="mother.html" class="sub-item">Mother</a>
                </div>
              </div>

Here is the CSS code relating to the dropdown menu:

.side-bar .menu .item a .dropdown{
    position: absolute;
    right: 0;
    margin: 20px;
    transition: 0.5s ease;
}

.side-bar .menu .item .sub-menu{
    background: rgba(255, 255, 255, 0.1)
}

.side-bar .menu .item .sub-menu a{
    padding-left: 80px;
}

.rotate{
    transform: rotate(90deg);
}

And finally here is the javascript responsible for the opening and closing of the dropdown menu:

$('.sub-btn').click(function(){
            $(this).next('.sub-menu').slideToggle();
            $(this).find('.dropdown').toggleClass('rotate');
          });