ドロップダウンリストの実装方法

<script>//ここからは、JQuery！$(function(){//nav ul liをマウスでホバーさせるとnav ul ul が出現する。$("nav ul li").mouseenter(function(){//nav ul li(this)の兄弟要素にnav ul ulを含んでいるのかを調査する。$(this).siblings().find("nav ul ul");//nav ul liの子要素であるnav ul ulをdisplay:blockで目に見えるようにする。$(this).children().slideDown(150);});//body内をクリックしたら、nav ul ulをdisplay:noneにして表示させないようにする。$("body").click(function(){$('nav ul ul').slideUp(150);});});</script><divid="nav"><ul><liclass ="first"><ahref="./index.html">トップページ<br>HOME</a></li><liclass="clinic"><ahref="#clinic">医院紹介<br>CLINIC</a><ul><li><ahref="#">新宿</a></li><li><ahref="#">渋谷</a></li><li><ahref="#">赤羽</a></li></ul></li><li><ahref="#service">診察案内<br>SERVICE</a></li><li><ahref="#staff">院長／スタッフ紹介<br>STAFF</a><ul><li><ahref="#">院長紹介</a></li><liclass = "parent"><ahref="#">スタッフ紹介</a><ulclass ="children"><li><ahref="#">赤羽茜</a></li><li><ahref="#">宇田川茂良</a></li><li><ahref="#">渋谷真知子</a></li></ul></li><liclass = "parent"><ahref="#">中途採用</a><ulclass ="children"><li><ahref="#">正社員</a></li><li><ahref="#">受付アルバイト</a></li><li><ahref="#">契約社員</a></li></ul></li></ul></li><liclass ="last"><ahref="#access">アクセス/Q&A<br>Access</a><ul><li><ahref="#">アクセス</a></li><li><ahref="#">営業時間</a></li></ul></li></ul></div>

navul{display:flex;width:1050px;margin:0auto;}navulul{position:absolute;width:100%;top:100%;left:0;display:none;}navululli{width:100%;background-color:navy;border-bottom:1pxsolid#fff;right:0px;width:190px;z-index:999;position:relative;}navul>li{justify-content:center;background-color:#6CC6C4;width:20%;padding:10px;text-align:center;border-right:1pxsolidwhite;position:relative;}navullia{font-size:0.85em;}navullia{color:white;text-decoration:none;}navul>ul>li{background-color:#6CC6C4;width:200px;display:block;padding:10px;text-align:center;border-right:1pxsolidwhite;}li.parent{position:relative;}ul.children{left:100.8%;top:0;position:absolute;display:none;}/*li.parentをhoverすると、子要素のul.childrenが、出現する！*/li.parent:hoverul.children{display:block;opacity:0.87;}