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

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

ドロップダウンリストの実装をJQueryで簡単に行うことができるのですが、
今回は泥臭い方法で、実装していきます。(全て0から実装しました笑)
ほぼCssメインといっても、過言ではないのですが、
JQueyとCssで実装する２パターンを紹介させて頂きます。

index.html


<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>

ここからHTML領域になります。
<div id="nav">
 <ul>
      <li class ="first"><a href="./index.html">トップページ<br>HOME</a></li>

      <li class="clinic"><a href="#clinic">医院紹介<br>CLINIC</a>

       <ul>
        <li><a href="#">新宿</a></li>
        <li><a href="#">渋谷</a></li>
        <li ><a href="#">赤羽</a></li>
       </ul>
      </li>

      <li><a href="#service">診察案内<br>SERVICE</a></li>
      <li><a href="#staff">院長／スタッフ紹介<br>STAFF</a>

        <ul>
         <li><a href="#">院長紹介</a></li>

         <li class = "parent"><a href="#">スタッフ紹介</a>
           <ul class ="children">
            <li><a href="#">赤羽茜</a></li>
            <li><a href="#">宇田川茂良</a></li>
            <li><a href="#">渋谷真知子</a></li>
           </ul>
         </li>

         <li class = "parent"><a href="#">中途採用</a>
             <ul class ="children">
              <li><a href="#">正社員</a></li>
              <li><a href="#">受付アルバイト</a></li>
              <li><a href="#">契約社員</a></li>
             </ul>
           </li>

        </ul>
      </li>
      <li class ="last"><a href="#access">アクセス/Q&A<br>Access</a>

        <ul>
         <li><a href="#">アクセス</a></li>
         <li><a href="#">営業時間</a></li>
        </ul>
      </li>
 </ul>
</div>

style.css

nav ul{
display:flex;
width:1050px;
margin: 0 auto;
}

nav ul ul{
position: absolute;
width:100%;
top: 100%;
left:0;
display: none;
}

nav ul ul li{
width: 100%;
background-color: navy;
border-bottom:1px solid #fff;
right: 0px;
width: 190px;
z-index: 999;
position: relative;
}

nav ul>li{
justify-content: center;
background-color: #6CC6C4;
width:20%;
padding:10px;
text-align:center;
border-right:1px solid white;
position: relative;
}

nav ul li a{
font-size:0.85em;
}

nav ul li a{
color:white;
text-decoration:none;
}

nav ul > ul > li{
background-color: #6CC6C4;
width:200px;
display: block;
padding:10px;
text-align:center;
border-right:1px solid white;
}

li.parent{
position: relative;
}

ul.children{
left:100.8%;
top:0;
position:absolute;
display: none;
}

/*li.parentをhoverすると、子要素のul.childrenが、出現する！*/
li.parent:hover ul.children{
display: block;
opacity: 0.87;
}

完成イメージ図
https://www.nxworld.net/wp-content/uploads/2016/06/css-simple-hoverable-dropdown.png

色や幅に関しては、お好みで調整してみてくださいね！では、アディオス！