CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tips | Dropdown Menu</title>
    <style>
      .dropdown > ul > li {
        display: inline-block;
        position: relative;
      }
      .dropdown > ul > li > ul {
        position: absolute;
        list-style-type: none;
        padding-left: 0px;
        display: none;
      }
      .dropdown > ul > li:hover > ul {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="dropdown">
      <ul>
        <li>
          <a href="#">Lorem</a>
        </li>
        <li>
          <a href="#">Ipsum</a>
          <ul>
            <li><a href="#">Consectetur</a></li>
            <li><a href="#">Amet</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Dolor</a>
          <ul>
            <li><a href="#">Adipiscing</a></li>
            <li><a href="#">Elit</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

Related Posts

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...

CSS / opacity / 요소를 투명하게 만드는 속성

CSS / opacity / 요소를 투명하게 만드는 속성

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...

CSS / border-style / 테두리 모양을 정하는 속성

CSS / border-style / 테두리 모양을 정하는 속성

개요 border-style은 테두리(border)의 모양을 정하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 border-style은 border-top-style, border-right-style, border-bottom-style, border-left-style의 축약형입니다. 문법 border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. initial과 ...

CSS / 기초 / !important

CSS / 기초 / !important

개요 CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 문법 property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 ...

CSS / 선택자(Selector) / :nth-child(), :nth-last-child()

CSS / 선택자(Selector) / :nth-child(), :nth-last-child()

:nth-child(), :nth-last-child() :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자입니다. :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 셉니다. 인터넷 익스플로러는 IE 9 이상에서 사용할 수 있습니다. :nth-child() :nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. 문법 :nth-child( an+b ) a와 b는 정수입니다. 0과 음수도 가능합니다. n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 ...

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS / counter-reset, counter-increment로 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 인용문(Blockquote) 꾸미기

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문을 꾸미는 여러 가지 예제입니다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...

CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성

CSS / 애니메이션 / transition / transition-delay - transition 시작을 연기하는 속성

transition-delay transition-delay로 transition이 시작하는 시간을 연기할 수 있습니다. IE는 버전 10부터 지원합니다. 문법 transition-duration: time| initial | inherit 기본값은 0s입니다. 시간 단위는 초(s) 또는 1/1000초(ms)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 1초에 걸쳐 박스가 커집니다. 첫 번째 박스는 0.5초 대기 후 커집니다. 즉, 박스가 커지는데 1.5초가 걸립니다. 두 번째 박스는 1초 대기 후 커집니다. ...

CSS / 애니메이션 / animation

CSS / 애니메이션 / animation

예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS 강좌