Как исправить прослушиватель событий щелчка при обновлении, для работы требуется двойной щелчок

const dropDownMain = document.querySelector('.dropdown');
 const dropdown = document.querySelector('.dropdown1');
 const dropdown2 = document.querySelector('.dropdown2');
 const submenu1 = document.querySelector('.submenu1');
 const dropdown3 = document.querySelector('.dropdown3');
 const submenu2 = document.querySelector('.submenu2');
 const list = document.querySelector('#listAdd');
 
 dropDownMain.addEventListener('click', function(){

   // ***********************************************************
   // Get the computed display style
   let computedDisplay = getComputedStyle(dropdown).display;
   // ***********************************************************
   
   // Test for the computed style, not the inline style which hasn't been set yet.
   if (computedDisplay === 'none'){
     dropdown.style.display = 'block';
     dropDownMain.style.backgroundColor = 'black';
    
   }else{
     dropdown.style.display = 'none';
     dropDownMain.style.backgroundColor = '#444444';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
     dropdown3.style.display = 'none';
    submenu2.style.backgroundColor = '#444444';
 
     
   }
 });
 
 
// First Submenu
 submenu1.addEventListener('click', function(){
   if (dropdown2.style.display === 'none' ){
     dropdown2.style.display = 'block';
     dropdown3.style.display = 'none';
     submenu1.style.backgroundColor = 'black';
     submenu2.style.backgroundColor = '#444444';
   }else{
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }
 });

// Second Submenu
 submenu2.addEventListener('click', function(){
   if (dropdown3.style.display === 'none'){
     dropdown3.style.display = 'block';
     submenu2.style.backgroundColor = 'black';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }else{
     dropdown3.style.display = 'none';
     submenu2.style.backgroundColor = '#444444';
     submenu1.style.backgroundColor = '#444444';
   }
 });
 
 document.getElementById('searchGlass').addEventListener('click', function(){
   addOnList = document.getElementById('form').value;
   console.info(addOnList);
   let listing = document.createElement('li');
   let anchor = document.createElement('a');
   let att = document.createAttribute('href');
   att.value = '#';
   anchor.setAttributeNode(att);
   listing.appendChild(anchor);
   anchor.appendChild(document.createTextNode(addOnList));
   list.appendChild(listing);
 });

body,html{
  font-family: 'PT Sans', sans-serif;
  background-color: white;
  margin:0;
  color: white;
  line-height:1.6;
}

.container{
  width:1920px;
  margin: 0px;
}

#nav1{
  background-color:#444444;
  background-repeat:no-repeat;
  color:white;
  font-size:14px;
  overflow:hidden;
  height:50px;
  box-shadow: 0px 1px 10px #999;
}

#nav1 ul{
  padding:0;
}

#nav1 li{
  display:inline;
}

#nav1 a {
  text-decoration:none;
  color:white;
  padding:20px;
}

#nav1 li a:active{
  background-color:black;
}

#nav1 li a:hover{
  background-color:black;
}

.fas {
  vertical-align:middle;
}

/*First Menu*/

.dropdown1{
  background-color:#444444;
  width:200px;
  margin-top:0px;
  box-shadow: 0px 0px 10px #999;
  position:absolute;
  margin-left:204px;
  padding-bottom:15px;
  display:none;
}

.dropdown1:before, .dropdown1:after{
  content:'';
  position:absolute;
  display:block;
  bottom:100%;
  width:0;
  height:0;
}

.dropdown1:before{
  left:19px;
  border: 11px solid transparent;
  border-bottom-color:#444444;
}

.dropdown1:after{
  left:20px;
  border: 11px solid transparent;
  border-bottom-color: #444444;
}

.dropdown1 ul{
   padding:20px;
  list-style-type: none;
  
}

.dropdown1 li{
  padding-bottom:5px;
  
  border-bottom: 1px solid grey;
}

.dropdown1 a{
 
  text-decoration:none;
  color:white;
  font-size:12px;
}

.dropdown1 li a:active {
  background-color:black;
}
.dropdown1 li:hover {
  background-color:black !important;
}

.dropdown1 li:first-child {
   background:none !important;
}


.dropdown1 input{
  color:white;
  border:none;
  padding-top:5px;
  height:10px;
  margin-left:20px;
}

.dropdown1 li:nth-child(3) i{
  color:white;
  margin-left:108px;
}

.dropdown1 li:nth-child(5) i{
  color:white;
  margin-left:98px;
}

.inputBar{
  width:120px;
  background-color:#444444;
  border: 1px solid transparent;
  box-shadow:0px 0px 10px #999;
  padding:5px;
}

#searchGlass{
  margin-left:10px;
  padding:3px;
  text-align:center;
  vertical-align:middle;
  box-shadow:0px 0px 10px #999 ;
}

#searchGlass i{
  width:15px;
}


#listAdd{
  margin:0;
}


/*First Sub Menu*/

.dropdown2{
  background-color:#444444;
  width:200px;
  height:270px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:98px;
  display:none;
}

.dropdown2 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown2 li{
  padding-bottom:5px;
  border-bottom: 1px solid grey;
}

.dropdown2 a{
  color:white;
  font-size:12px;
  text-decoration:none;
}


.dropdown2 li:hover{
  background-color:black !important;
}

.dropdown2 li:first-child{
  background:none !important;
}

/*Second SubMenu*/

.dropdown3{
  background-color:#444444;
  width:200px;
  height:240px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:160px;
  display:none;
  
}

.dropdown3 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown3 li{
  padding-bottom:5px;
  border-bottom:1px solid grey;
}

.dropdown3 a{
  text-decoration:none;
  color:white;
  font-size:12px;
  padding:0;
}

.dropdown3 li:hover{
  background-color:black !important;
}

.dropdown3 li:first-child{
  background:none;
}

<!DOCTYPE html>
<html>
<head>
<title>Drop Down Menu</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity = "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin = "anonymous">


</head>

<body>
  <header class = "container">
    <!--Start of Navbar-->
    <!--Main Navbar-->
    <nav id = "nav1">
      <ul>
        <li><a href = "#">History</a></li>
        <li><a href = "#">Foundation</a></li>
        <li><a href = "#" class = "dropdown">Downloads <i class = "fas fa-angle-down"></i></a></li>
        <li><a href = "#">Contact Us</a></li>
      </ul>
    </nav>
    <!-- End of Main Navbar-->
    <!--Main Menu-->
    <div class = "dropdown1">
      <ul id = "listAdd">
        <li>Sample Menu</li>
        <li><a href = "#">Television</a></li>
        <li class = "submenu1"><a href = "#" >Movies <i class = "fas fa-angle-right"></i> </a></li>
        <li><a href = "#">E-Books</a></li>
        <li class = "submenu2"><a href = "#" >Software <i class = "fas fa-angle-right"></i></a></li>
        <li><a href = "#">Images</a></li>
      </ul>
      <input placeholder = "Input" class = "inputBar" id = "form"><a href = "#" id = "searchGlass"><i class = "fas fa-search fa-xs"></i></a>
    </div>
    <!--End of Main Menu-->
    <!--First Sub Menu-->
    <div class = "dropdown2">
      <ul>
        <li>Top Movies</li>
        <li><a href = "#">Friday</a></li>
        <li><a href = "#">Avengers</a></li>
        <li><a href = "#">Transformers</a></li>
        <li><a href = "#">Dark Knight</a></li>
        <li><a href = "#">The Notebook </a></li>
      </ul>
    </div>
    <!--End of First Sub Menu-->
    <!--Second Sub Menu-->
    <div class = "dropdown3">
      <ul>
        <li>Top Software</li>
        <li><a href = "#">Adobe</a></li>
        <li><a href = "#">Gimp</a></li>
        <li><a href = "#">Microsoft Office</a></li>
        <li><a href = "#">Rosetta Stone</a></li>
      </ul>
    </div>
    <!--End of Second Sub Menu-->
  </header>
  <!--End of Navbar-->

<script src = "script.js"></script>
</body>

</html>