ドロップダウンが機能しない

ナビゲーションバーがあり、ボタンの1つがonclickドロップダウンになります。 私は彼女を作りましたが、最初に、CSSは機能しません。次に、JSが機能しません。

じゃあ見てみて私はそれを3回読み直そうとし、1時間ほどのスペルミスの後にチェックしました。

HTML：

<div class="functionMobileDropDownDropDown">
      <button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn">
        Dropdown
      </button>
        <div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </div>
    </div>

CSS：

   .functionMobileDropDownDropBtn {
       background-color: #3498DB;
       color: white;
       padding: 16px;
       font-size: 16px;
       border: none;
       cursor: pointer;
   }
   .functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
       background-color: #2980B9;
   }
   .functionMobileDropDownDropDown {
       position: relative;
       display: inline-block;
   }
   .functionMobileDropDownDropDown-Content {
       display: none;
       position: absolute;
       background-color: #f1f1f1;
       min-width: 160px;
       overflow: auto;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       z-index: 1;
   }
   .functionMobileDropDownDropdown-Content a {
       color: black;
       padding: 12px 16px;
       text-decoration: none;
       display: block;
   }
   .functionMobileDropDownDropDown a:hover {
     background-color: #ddd
   }
   .MobileDropDownShow   {
     display:block;
   }

JS：

function functionMobileDropDown（）{ document.getElementById（ "functionMobileDropDownMyDropDown"）。classList.toggle（ "functionMobileDropDownShow"）; }

window.onclick = function（event）{ if（！event.target.matches（ '。functionMobileDropDownDropBtn'））{

var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('functionMobileDropDownShow')) {
    openDropdown.classList.remove('functionMobileDropDownShow');
  }
}

} }

function functionMobileDropDown() {
      document.getElementById("functionMobileDropDownMyDropDown").classList.toggle("functionMobileDropDownShow");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.functionMobileDropDownDropBtn')) {
        var dropdowns = document.getElementsByClassName("functionMobileDropDownDropDown-Content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('functionMobileDropDownShow')) {
            openDropdown.classList.remove('functionMobileDropDownShow');
          }
        }
      }
    }

.functionMobileDropDownDropBtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  .functionMobileDropDownDropBtn:hover, .functionMobileDropDownDropBtn:focus {
      background-color: #2980B9;
  }
  .functionMobileDropDownDropDown {
      position: relative;
      display: inline-block;
  }
  .functionMobileDropDownDropDown-Content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  .functionMobileDropDownDropdown-Content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  .functionMobileDropDownDropDown a:hover {
  	background-color: #ddd
  }
  .MobileDropDownShow	 {
  	display:block;
  }

<div class="functionMobileDropDownDropDown">
          <button onclick="functionMobileDropdown()" class="functionMobileDropDownDropBtn">
            Dropdown
          </button>
            <div id="functionMobileDropDownMyDropDown" class="functionMobileDropDownDropDown-Content">
              <a href="#home">Home</a>
              <a href="#about">About</a>
              <a href="#contact">Contact</a>
            </div>
        </div>