티스토리 뷰

웹디자인

드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)

깽아네 2018. 11. 13. 13:55
728x90

 

안녕하세요. 잘 지내셨나요? 오랫만에 제 전공과 관련된 포스팅을 하려 합니다. 홈페이지 상단 메뉴에서 주로 쓰이고 있는 드롭다운메뉴 를 css로 적용하는 방법을 알려드릴께요.

 

 

이와 같은 메뉴입니다.

 

html

  1. <body>
  2. <div class="dropmenu">
  3. <ul>
  4.  <li><a href="#">Home</a></li>
  5.  <li><a href="#" id="current">main01</a>
  6.  <ul>
  7.      <li><a href="#">menu1</a></li>
  8.      <li><a href="#">menu2</a></li>
  9.      <li><a href="#">menu3</a></li>
  10.     </ul>
  11.  </li>
  12.  <li><a href="#">main02</a></li>
  13. </ul>
  14. </div>
  15. </body>

 

css

  1. .dropmenu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: "sans-serif";
    font-size:18px;
    }

    .dropmenu ul{
    background: #666;
    height:100px;
    list-style:none;
    margin:0;
    padding:0;
    }

    .dropmenu li{
    float:left;
    padding:0px;
    }

    .dropmenu li a{
    background: #666;
    color:#fff;
    display:block;
    line-height:100px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }

    .dropmenu li a:hover, .dropmenu ul li:hover a{
    background: rgb(31,31,31);
    color:#FFFFFF;
    text-decoration:none;
    }

    .dropmenu li ul{
    background: red;
    display:none;
    height:auto;
    border:0px;
    position:absolute;
    width:200px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }

    .dropmenu li:hover ul{
    display:block;
    }

    .dropmenu li li {
    background: red;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
    }

    .dropmenu li:hover li a{
    background:none;
    }

    .dropmenu li ul a{
    display:block;
    height:80px;
    font-size:14px;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }

    .dropmenu li ul a:hover, .dropmenu li ul li:hover a{
    background: rgb(171,171,171);
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }

    .dropmenu p{
    clear:left;
    }

 

 

 

728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

absolute 가운데 정렬하는 css  (0) 2018.12.06
마우스 오버시 이미지 확대 css팁  (0) 2018.11.29
배경이미지 슬라이드 (페이드 인/아웃)  (0) 2018.10.11
레이어팝업시 배경은 어둡게하기  (0) 2018.10.11
파비콘 만들어 홈페이지 적용하기  (0) 2018.10.10