Как закрыть подменю при нажатии снаружи?

Question

    <div id="menu">

        <ul class="mainMenu">

            <li> <a href="#" class="speech"> Parts of Speech </a>

                <ul class="submenu">

                    <li> <a href="noun.html"> Noun </a></li>
                    <li> <a href="noun.html"> Pronoun </a></li>
                    <li> <a href="noun.html"> Adjective </a></li>
                    <li> <a href="noun.html"> Verb </a></li>
                    <li> <a href="noun.html"> Adverb </a></li>
                    <li> <a href="noun.html"> Preposition </a></li>
                    <li> <a href="noun.html"> Conjunction </a></li>
                    <li> <a href="noun.html"> Interjection </a></li>

                </ul>

            </li>

          </ul>

      </div>  

.submenu li {

        display: none;

    }

$ (документ) .ready (function () {// DropDown Menu // $ ('. Speech'). Click (function () {$ ('.submenu'). children (). slideToggle (500);}); // Закрытие всех меню при щелчке снаружи. // $ (document) .click (function () {$ ('. submenu'). hide ( );}); $ ('. speech'). click (function (e) {e.stopPropagation ();});});

кодовая ручка: https://codepen.io/Tarun1980/pen/rgQzeO