<![CDATA[
<p><span style="font-family: 'Noto Serif KR';"><b> 아름다운 CSS3 다색 드롭다운 메뉴</b></span></p><p>index_html</p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZZhx/07e85030c736446fd50398f9b39510e316a6a74b" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZZhx/07e85030c736446fd50398f9b39510e316a6a74b" data-origin-width="1280" data-origin-height="1195"></div><p><br><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" class="ke-link">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" class="ke-link">http://www.w3.org/1999/xhtml</a>" xml:lang="en"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br><머리></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    <link rel="스타일시트" href="css/style.css" 유형="텍스트/css" 미디어="모두"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    CSS3 드롭다운 메뉴 #3</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br></머리></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br><본문></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br><div 클래스="예"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    <div class="메뉴홀더"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>        <ul class="메뉴 슬라이드"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            <li><a href="#" class="red">홈</a></li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            <li><a href="#" class="orange">튜토리얼</a></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                <div class="subs"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #1</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">HTML / CSS</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">JS/jQuery</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">PHP</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #2</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">MySQL</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">XSLT</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">Ajax</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #3</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">HTML / CSS</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">JS/jQuery</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">PHP</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #4</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">MySQL</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">XSLT</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">Ajax</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                </div></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            </li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            <li><a href="#" class="노란색">리소스</a></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                <div class="subs"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #5</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">PHP</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">MySQL</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #6</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">XSLT</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">Ajax</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #7</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">HTML / CSS</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">JS/jQuery</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    <dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dt>링크 #8</dt></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">MySQL</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                        <dd><a href="#">Ajax</a></dd></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                    </dl></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>                </div></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            </li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            <li><a href="#" class="녹색">기타</a></li></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>            <li><a href="#" class="blue">정보</a></li></font></font><font></font> <br>            <li><a href="#" class="violet">Back</a></li><font></font> <br>        </ul><font></font> <br>        <div class="back"></div><font></font> <br>        <div class="shadow"></div><font></font> <br>    </div><font></font> <br>    <div style="clear:both"></div><font></font> <br></div><font></font> <br></body><font></font> <br></html><font></font></p><p> </p><p>index_style</p><p> </p><p>* demo page styles */<font></font> <br>body {<font></font> <br>    background:#eee;<font></font> <br>    margin:0;<font></font> <br>    padding:0;<font></font> <br>}<font></font> <br>.example {<font></font> <br>    position:relative;<font></font> <br>    background:#fff url(../images/background.jpg);<font></font> <br>    width:670px;<font></font> <br>    height:470px;<font></font> <br>    border:1px #000 solid;<font></font> <br>    margin:20px auto;<font></font> <br>    padding:15px;<font></font> <br>    border-radius:3px;<font></font> <br>    -moz-border-radius:3px;<font></font> <br>    -webkit-border-radius:3px;<font></font> <br>}<font></font> <br><font></font> <br>/* main menu styles */<font></font> <br>.menuholder {<font></font> <br>    float:left;<font></font> <br>    font:normal bold 11px/35px verdana, sans-serif;<font></font> <br>    overflow:hidden;<font></font> <br>    position:relative;<font></font> <br>}<font></font> <br>.menuholder .shadow {<font></font> <br>    -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);<font></font> <br>    -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);<font></font> <br>    -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);<font></font> <br>    background:#888;<font></font> <br>    box-shadow:0 0 20px rgba(0, 0, 0, 1);<font></font> <br>    height:10px;<font></font> <br>    left:5%;<font></font> <br>    position:absolute;<font></font> <br>    top:-9px;<font></font> <br>    width:90%;<font></font> <br>    z-index:100;<font></font> <br>}<font></font> <br>.menuholder .back {<font></font> <br>    -moz-transition-duration:.4s;<font></font> <br>    -o-transition-duration:.4s;<font></font> <br>    -webkit-transition-duration:.4s;<font></font> <br>    background-color:rgba(0, 0, 0, 0.5);<font></font> <br>    height:0;<font></font> <br>    width:100%;<font></font> <br>}<font></font> <br>.menuholder:hover div.back {<font></font> <br>    height:250px;<font></font> <br>}<font></font> <br>ul.menu {<font></font> <br>    display:block;<font></font> <br>    float:left;<font></font> <br>    list-style:none;<font></font> <br>    margin:0;<font></font> <br>    padding:0 125px;<font></font> <br>    position:relative;<font></font> <br>}<font></font> <br>ul.menu li {<font></font> <br>    float:left;<font></font> <br>    margin:0 5px 0 0;<font></font> <br>}<font></font> <br>ul.menu li > a {<font></font> <br>    -moz-border-radius:0 0 10px 10px;<font></font> <br>    -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);<font></font> <br>    -moz-transition:all 0.2s ease-in-out;<font></font> <br>    -o-border-radius:0 0 10px 10px;<font></font> <br>    -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);<font></font> <br>    -o-transition:all 0.2s ease-in-out;<font></font> <br>    -webkit-border-bottom-left-radius:10px;<font></font> <br>    -webkit-border-bottom-right-radius:10px;<font></font> <br>    -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);<font></font> <br>    -webkit-transition:all 0.2s ease-in-out;<font></font> <br>    border-radius:0 0 10px 10px;<font></font> <br>    box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);<font></font> <br>    color:#eee;<font></font> <br>    display:block;<font></font> <br>    padding:0 10px;<font></font> <br>    text-decoration:none;<font></font> <br>    transition:all 0.2s ease-in-out;<font></font> <br>}<font></font> <br>ul.menu li a.red {<font></font> <br>    background:#a00;<font></font> <br>}<font></font> <br>ul.menu li a.orange {<font></font> <br>    background:#da0;<font></font> <br>}<font></font> <br>ul.menu li a.yellow {<font></font> <br>    background:#aa0;<font></font> <br>}<font></font> <br>ul.menu li a.green {<font></font> <br>    background:#060;<font></font> <br>}<font></font> <br>ul.menu li a.blue {<font></font> <br>    background:#00a;<font></font> <br>}<font></font> <br>ul.menu li a.violet {<font></font> <br>    background:#682bc2;<font></font> <br>}<font></font> <br>.menu li div.subs {<font></font> <br>    left:0;<font></font> <br>    overflow:hidden;<font></font> <br>    position:absolute;<font></font> <br>    top:35px;<font></font> <br>    width:0;<font></font> <br>}<font></font> <br>.menu li div.subs dl {<font></font> <br>    -moz-transition-duration:.2s;<font></font> <br>    -o-transition-duration:.2s;<font></font> <br>    -webkit-transition-duration:.2s;<font></font> <br>    float:left;<font></font> <br>    margin:0 130px 0 0;<font></font> <br>    overflow:hidden;<font></font> <br>    padding:40px 0 5% 2%;<font></font> <br>    width:0;<font></font> <br>}<font></font> <br>.menu dt {<font></font> <br>    color:#fc0;<font></font> <br>    font-family:arial, sans-serif;<font></font> <br>    font-size:12px;<font></font> <br>    font-weight:700;<font></font> <br>    height:20px;<font></font> <br>    line-height:20px;<font></font> <br>    margin:0;<font></font> <br>    padding:0 0 0 10px;<font></font> <br>    white-space:nowrap;<font></font> <br>}<font></font> <br>.menu dd {<font></font> <br>    margin:0;<font></font> <br>    padding:0;<font></font> <br>    text-align:left;<font></font> <br>}<font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>.menu dd a {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:투명;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    색상:#fff;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    글꼴 크기:12px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    높이:20px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    줄 높이:20px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    패딩:0 0 0 10px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    텍스트 정렬:왼쪽;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    공백:이제 랩;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    너비:80px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>.menu dd a:hover {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    색상:#fc0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>.menu li:hover div.subs dl {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    -moz-전환-지연:0.2s;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    -o-전환 지연:0.2s;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    -웹킷-전환-지연:0.2s;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    오른쪽 여백:2%;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    너비:21%;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li:hover > a,ul.menu li > a:호버 {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:#aaa;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    색상:#fff;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    패딩:10px 10px 0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li a.red:hover,ul.menu li:hover a.red {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:#c00;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li a.orange:hover,ul.menu li:hover a.orange {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:#fc0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:#cc0;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li a.green:hover,ul.menu li:hover a.green {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:#080;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li a.blue:hover,ul.menu li:hover a.blue {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    배경:#00c;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>ul.menu li a.violet:hover,ul.menu li:hover a.violet {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>배경:#8a2be2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>.menu li:hover div.subs,.menu li a:hover div.subs {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>    너비:100%;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> <br>}</font></font><font></font> <br>Step 3. Images <br>Here are just background for page. <br><br>That's it,Hope you enjoyed it. <br><br>The article source:<a href="http://www.script-tutorials.com/creating-css3-dropdown-menu-3/" target="_blank" class="ke-link">http://www.script-tutorials.com/creating-css3-dropdown-menu-3/</a></p><p> </p><p>index_script</p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';"><b>html tag 적합 한 사이트    <a href="http://www.htmldrive.net/items/show/911/Beautiful-CSS3-multicolour-Dropdown-Menu" target="_blank" class="ke-link">http://www.htmldrive.net/items/show/911/Beautiful-CSS3-multicolour-Dropdown-Menu</a></b></span></p><p><span style="font-family: 'Noto Serif KR';"><b> 아름다운 CSS3 다색 드롭다운 메뉴 </b></span></p>
<!-- -->
]]>
카페 게시글
♥☞HTML 이미지◈▶
아름다운 CSS3 다색 드롭다운 메뉴
gyun님
추천 0
조회 3
23.12.19 21:26
댓글 0
다음검색
