better design 드롭다운 Button

better design 드롭다운 Button<html><head></head><body>     <nav>         <ul class="n-list">             <li><a href="#">네비게이션1</a>                  <ul class="drop"-down">                        <li>                             <a href="#">네비1-1</a></li>                             <hr class="dashed">                        </li>                        <li><a href="#">네비1-2</a></li>                        <li><a href="#">네비1-3</a></li>                        <li><a href="#">네비1-4</a></li>                         </ul>              </li>             <li><a href="#">네비게이션2</a>                   <ul class="drop"-down">                         <li>                                <a href="#">네비1-1</a></li>                                <hr class="dashed">                         <li>                                <a href="#">네비1-2</a></li>                                                  <hr class="dashed">                                                  <li>                                <a href="#">네비1-3</a></li>                               <hr class="dashed">                          </li>                         <li><a href="#">네비1-4</a></li>                               <hr class="dashed">                   </ul>             <li><a href="#">네비게이션3</a></li>            <li><a href="#">네비게이션4</a></li>             <li><a href="#">네비게이션5</a></li>         </ul>     </nav></body></html>index_CSS tag       margin-top:20px;}ul.n-list{        69      width:100%;     margin:0;     padding:0; }ul.n-list > li > a{     width:15%;      background-color:black;     float:left;     list-style:none;     margin-left:4.16%;     margin-top:5px;}ul.n-list      color:white;        transition:1s;   }.thum{    203       position:relative;       overflow;hidden;}.thum:hover .hover-text{       top:0;}/* 드롭다운 */.drop-down{           212       width:100%;       padding:0;       margin:0;      position:absolute;      height:0;      overflow: hidden;      transition;1s;}.n-list>li{      position:relative;}.drop-down>li{       list-style-type;none;       background-color; black;}.drop-dwon>li>a{       display:flex;       width;100%;       height:50px;    228      align-items: center;      toxt-indont:20px;      backrouund-color:black;}.n-list>li:hover .drop-down{      height:250px;].dashed{       background-color:block;       margin:auto;       width;80%;       height:1px;       border-top:1px dashed white;       border-bottom;none;       }@media screen and (max-width:800px){           nav{                 width:95%;   html    css    java   <a href="https://velog.io/@dpdnjs402/uq0d5qph" target="_blank" class="ke-link">https://velog.io/@dpdnjs402/uq0d5qph</a>구글:  <a href="https://www.google.co.kr/" target="_blank" class="ke-link">https://www.google.co.kr/</a><a href="https://velog.io/@kauthenticity/HTML-CSS-드롭다운-메뉴-만들기" target="_blank" class="ke-link">https://velog.io/@kauthenticity/HTML-CSS-드롭다운-메뉴-만들기</a>

카페정보

SEONG님 CODING

브론즈 (공개)
카페지기 부재중
회원수 3
방문수0
카페앱수0

카페 전체 메뉴

▲

카페 게시글

◈─---… HTML. 실습방 better design 드롭다운 Button

gyun님 추천 0 조회 5 22.11.15 21:18 댓글 1

게시글 본문내용

다음검색

저작자 표시 컨텐츠변경 비영리

gyun님
작성자 22.11.16 11:55

첫댓글 https://www.google.co.kr/search?q=%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4%EB%B2%84%ED%8A%BC&sxsrf=ALiCzsZmYtJOfPo_Vs4oG1A-0v4ix5vUUg%3A1668566631341&source=hp&ei=Z050Y7fNEsve2roPp6yPyAw&iflsig=AJiK0e8AAAAAY3RcdywSsFLMvGRdo9urLQiKSwV3yBj3&ved=0ahUKEwj3nN-K17H7AhVLr1YBHSfWA8kQ4dUDCAo&uact=5&oq=%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4%EB%B2%84%ED%8A%BC&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEIAEOgcIIxDqAhAnOgQIIxAnOhAIABCABBCHAhCxAxCDARAUOgsILhCABBCxAxCDAToRCC4QgAQQsQMQgwEQxwEQ0QM6CwgAEIAEELEDEIMBOgQIABADOggIABCABBCxAzoKCAAQsQMQgwEQQzoECAAQQzoLCC4QgwEQsQMQgAQ6EwguEIMBEMcBELEDENEDEIAEEEM6CAguEIAEENQCOgoIABCABBCHAhAU

검색 옵션 선택상자

댓글내용선택됨 옵션 더 보기

댓글내용

댓글 작성자

연관검색어

환율

환자

환기

최신목록

SEONG님 CODING

https://cafe.daum.net/dnflqosemtkfkdgkqtle

카페 전체 메뉴