<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size23"><b>반응형 드롭다운 매뉴 </b></span></p><p><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta http-equiv="X-UA-Compatible" content="IE=edge"></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <title>pure css dropdown meny hover animation effect</title></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"></b></span><br><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><styl*{margin:0; padding:0;} <br>ul{list-style:none;} <br>a{text-decoration:none; color:#333;} <br>.menu:after{display:block; content:''; clear:both;} <br>.menu > li{position:relative; float:left; margin-right:5px;} <br>.menu > li > a{display:block; padding:0 15px; background:#333; height:40px; line-height:40px; color:#fff;} <br>.menu > li:hover .depth_1 {display:block;} <br>.menu .depth_1{display:none; position:absolute; left:0; right:0; text-align:center;} <br>.menu .depth_1 a{display:block; padding:5px; background:#666; color:#fff;}e></b></span></p><p> </p><p><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style></b></span></p><p><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p><ul class="menu"> <br>  <li> <br>    <a href="#">MENU 1</a> <br>    <ul class="depth_1"> <br>      <li><a href="#">MENU 1_1</a></li> <br>      <li><a href="#">MENU 1_2</a></li> <br>      <li><a href="#">MENU 1_3</a></li> <br>    </ul> <br>  </li> <br>  <li> <br>    <a href="#">MENU 2</a> <br>  </li> <br>  <li> <br>    <a href="#">MENU 3</a> <br>    <ul class="depth_1"> <br>      <li><a href="#">MENU 3_1</a></li> <br>      <li><a href="#">MENU 3_2</a></li> <br>    </ul> <br>  </li> <br></ul></p><p> </p><p><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p><span style="color: #000000; background-color: #000000; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></htnl></b></span></p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size23"><b>반응형 드롭다운 매뉴 </b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_password_placeholder2
https://www.google.com/search?q=%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4+%EB%A9%94%EB%89%B4&tbm=isch&hl=ko&chips=q:%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4+%EB%A9%94%EB%89%B4,g_1:%EB%B0%98%EC%9D%91+%ED%98%95:s9mQ6TzmyzM%3D&client=avast-a-1&sa=X&ved=2ahUKEwjA7vvincOCAxXWfXAKHQIrBpkQ4lYoBHoECAEQNg&biw=1903&bih=906
https://www.google.com/search?client=avast-a-1&q=%ED%84%B0%EC%B9%98+%EC%A7%80%EC%9B%90%ED%95%98%EB%8A%94+%EB%B0%98%EC%9D%91%ED%98%95+%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4+%EB%A9%94%EB%89%B4+%EB%A7%8C%EB%93%9C%EB%8A%94+%EB%B2%95&ie=UTF-8