입문)HTML 과 CSS (풀다운 메뉴 와 position)

 CSS 

★ 3대 속성 : position, display,  float ★ 

  

이번에는 position 속성에 대해 알아보자.

---

 

position:static;

엘리먼트의 기본 포지션인 모두 static 기본

 

position:absolute; 

엘리먼트의 포지션을 유령으로 만든다.

 

position:relative; 

유령의 집 기준 

유령이되면 유령의 집 기준으로 움직인다. 

 

유령 출력방법

  position:absolute;  

   top:0;  <> bottom
   left:0;  <> right

  top 50% 가능 .

  left:70%; ; 

 

ㅡ노말라이즈 : 초기화
nav, ul, li{
    list-style:none;
    padding:0;
    margin:0;
}
a {
    color:inherit;
    text-decoration:inherit;
}

 

---

 HTML 

<h1>go</h1>
  <nav class="top-menu">
    <ul>
      <li>
          <a href="#">식물</a>
          <ul>
            <li><a href="#">과일</a></li>
            <li><a href="#">야채</a></li>
          </ul>
        </li>
      <li>
        <a href="#">동물</a>
         <ul>
            <li><a href="#">포유류</a></li>
            <li><a href="#">조유류</a></li>
         </ul>
      </li>
    </ul>
  </nav>

   
   CSS 

/* 노말라이즈 */
nav, ul, li {
    list-style:none;
    padding:0;
    margin:0;
}

a {
    color:inherit;
    text-decoration:inherit;
}
/* 노말라이즈 */

/* 1차메뉴 메뉴 아이템 */
nav.top-menu > ul > li {
    display:inline-block;
}

/* 1차 메뉴 */
nav.top-menu > ul {
    display:inline-block;
}

/* 서브메뉴 */
nav.top-menu ul ul {
    display:none;
    position:absolute;
    top:100%;
    left:0;
}
///////////////////
/* 3차 메뉴 이하의 모든 서브메뉴 */
nav.top-menu ul ul ul {
    top:0;
    left:100%;
}
/////////////
/* 활성화된 서브메뉴 */
nav.top-menu li:hover > ul {
    display:block;
}

/* 메뉴아이템 */
nav.top-menu li {
    position:relative;
    background-color:#dfdfdf;
}

nav.top-menu li:hover {
    background-color:black;   
}

nav.top-menu li:hover > a {
    color:white;
}

/* 탑 메뉴 */
nav.top-menu {
    text-align:center;
}

/* 메뉴 아이템 텍스트 */
nav.top-menu a {
    /* 절대 줄바꿈 하지 마세요. */
    white-space:nowrap;
    padding:10px;
    display:block;
}

 

 

https://codepen.io/jungjoyjung/pen/VwVYwNm

VwVYwNm