<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b>HTML 호버 드롭다운 메뉴 A</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_html & css5</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <br><!DOCTYPE html> <br><html lang="en"> <br><head> <br>    <meta charset="UTF-8"> <br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>    <title>pure css dropdown meny hover animation effect</title> <br>    <link rel="stylesheet" href="style.css"> <br><br><style> <br><br><br>*{ <br>margin: 0; <br>padding: 0; <br>} <br>           body{ <br>background-image: url(1.jpg);   <br>-webkit-background-size:cover; <br>background-size:cover; <br>background-position: center center; <br>height: 100vh; <br>} <br><br>.wrapper{ <br>width: 860px;  <br>margin: 0 auto; <br>} <br>.wrapper ul{ <br>list-style: none; <br>margin-top: 2%; <br>} <br>.wrapper ul li { <br>background: #262626; <br>width: 170px; <br>border: 1px solid #fff; <br>height: 50px; <br>line-height: 50px; <br>text-align: center; <br>float: left; <br>color: #fff; <br>font-size: 16px; <br>position: relative; <br>font-family: poppins; <br>text-transform: uppercase; <br>font-weight: bold; <br>} <br>.wrapper ul li:hover{ <br>background: crimson;  <br>} <br><br>.wrapper ul ul{ <br>display: none; <br>} <br>.wrapper ul li:hover > ul{ <br>display: block; <br>} <br>.wrapper ul ul ul{ <br>margin-left: 170px; <br>top: 0; <br>position: absolute; <br>} <br><br></style> <br><br></head> <br><br><body> <br>        <div class="wrapper"> <br>       <ul> <br>   <li>home</li> <br>  <li>About</li> <br>  <li>Services <br>            <ul> <br><li>Marketing</li> <br><li>Design <br>                    <ul> <br><li>Web</li> <br><li>Graphics</li> <br><li>Interior</li> <br></ul> <br></li> <br><li>Branding</li> <br></ul> <br></li> <br><li>Portfolio</li> <br><li>Contact</li> <br></ul> <br></div> <br><br></body> <br><br><body> <br></httm> <br><br>  <br><br> </b></span></p><p> </p><p> </p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><------------------------------------></b></span></p><p style="text-align: left;"><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 style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><style></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <br>*{ <br>margin: 0; <br>padding: 0; <br>} <br>           body{ <br>background-image: url(1.jpg);   <br>-webkit-background-size:cover; <br>background-size:cover; <br>background-position: center center; <br>height: 100vh; <br>} <br><br>.wrapper{ <br>width: 860px;  <br>margin: 0 auto; <br>} <br>.wrapper ul{ <br>list-style: none; <br>margin-top: 2%; <br>} <br>.wrapper ul li { <br>background: #262626; <br>width: 170px; <br>border: 1px solid #fff; <br>height: 50px; <br>line-height: 50px; <br>text-align: center; <br>float: left; <br>color: #fff; <br>font-size: 16px; <br>position: relative; <br>font-family: poppins; <br>text-transform: uppercase; <br>font-weight: bold; <br>} <br>.wrapper ul li:hover{ <br>background: crimson;  <br>} <br><br>.wrapper ul ul{ <br>display: none; <br>} <br>.wrapper ul li:hover > ul{ <br>display: block; <br>} <br>.wrapper ul ul ul{ <br>margin-left: 170px; <br>top: 0; <br>position: absolute; <br>} <br></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body><br>        <div class="wrapper"> <br>       <ul> <br>   <li>home</li> <br>  <li>About</li> <br>  <li>Services <br>            <ul> <br><li>Marketing</li> <br><li>Design <br>                    <ul> <br><li>Web</li> <br><li>Graphics</li> <br><li>Interior</li> <br></ul> <br></li> <br><li>Branding</li> <br></ul> <br></li> <br><li>Portfolio</li> <br><li>Contact</li> <br></ul> <br></div> <br></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p style="text-align: left;"><span style="color: #333333; background-color: #ffffff; font-family: 'Noto Serif KR';" data-ke-size="size18"><b></httm></b></span></p><p> </p><p> </p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZSgi/a21ae70207aded2a2034eaddaad3c7d2a868eaab" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZSgi/a21ae70207aded2a2034eaddaad3c7d2a868eaab" data-origin-width="781" data-origin-height="1000"></div><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size20"><b> HTML 호버 드롭다운 메뉴 A </b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_password_placeholder2
https://www.codingflicks.com/2020/08/how-to-make-drop-down-menu-using-html-cs.html