Have Dropdown menu be closed when website loads-CodePudding

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 >
                <a ><i ></i>Character Analysis<i ></i></a>
                <div >
                  <a href="francis.html" >Francis</a>
                  <a href="michael.html" >Michael</a>
                  <a href="aisha.html" >Aisha</a>
                  <a href="mother.html" >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');
          });

CodePudding user response：

All you need is to set the .sub-menu class to display: none; and that will have it hidden on load by default until the user clicks your nav

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

.sub-menu{
  display: none;
}

.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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
                <a ><i ></i>Character Analysis<i ></i></a>
                <div >
                  <a href="francis.html" >Francis</a>
                  <a href="michael.html" >Michael</a>
                  <a href="aisha.html" >Aisha</a>
                  <a href="mother.html" >Mother</a>
                </div>
              </div>