<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/wHFflWvii3M?si=9_JlarYa_cKu7oWO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/wHFflWvii3M?si=9_JlarYa_cKu7oWO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>/div></div><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials</b></span></p><p> </p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html></b></span><br><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html lang="en"></b></span><br><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span><br><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <meta charset="UTF-8"></b></span><br><span style="color: #333333; background-color: #ffffff; 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: #333333; background-color: #ffffff; 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: #333333; background-color: #ffffff; 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: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    <link rel="stylesheet" href="style.css"></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       <ul></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           <li>Home</li></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           <li>About</li></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           <li>Services</li></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li>Cliernts</li> </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>            <li>Investors</li> </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           <li>Pricing</li> </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           <li>Traing</li> </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>           <li>Contact</li> </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>      </ul></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size23"><b>index_CSS tag</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>*</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>{</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        padding: ;</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        margin: ;</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>{</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-image: url(background.jpg)P; </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-size: cover;</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        background-position: center;</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        box-sizing: border-box; </b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        font-family: sans-serif;</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.menu-bar</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>{</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>         background: rgb(0,100,0);</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b>         text-align: center;</b></span></p><p><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size23"><b><span data-ke-size="size18">}</span><br><br></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b> How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials </b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_password_placeholder2
https://www.google.com/search?q=How+To+Make+Drop+Down+Menu+Using+HTML+And+CSS+%7C+HTML+Website+Tutorials&client=avast-a-1&sca_esv=582289591&tbm=isch&sxsrf=AM9HkKnKLOSQ6enrLb4OYMwZnbiUBhDa8Q:1699975084734&source=lnms&sa=X&ved=2ahUKEwj-t7XY5MOCAxXWA94KHV1CA9gQ_AUoAnoECAIQBA&biw=1920&bih=963&dpr=1