입문) CSS (float을 이용한 풀다운 메뉴)

1차 메뉴만들기 

HTML 

<h1>메뉴만들기</h1>
<nav class="top-menu">
  <ul>
    <li><a href="#">1차 메뉴아이템 1</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
        <li><a href="#">2차 메뉴 아이템 4</a></li>
      </ul>
    </li>
    <li><a href="#">1차 메뉴아이템 2</a></li>
    <li><a href="#">1차 메뉴아이템 3</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
        <li><a href="#">2차 메뉴 아이템 4</a></li>
      </ul>
    </li>
    <li><a href="#">1차 메뉴아이템 4</a></li>
  </ul>
</nav>

 

 CSS 

nav, ul, li {
  list-style:none;
  padding:0;
}
a {
  text-decoration:inherit;
  color:inherit;
}
/*2차 메뉴를 포함한 모든 서브메뉴*/
nav.top-menu ul ul {
  display:none;
}
/*활성화된 서브메뉴*/
nav.top-menu li:hover > ul {
  display:block;
}
/* 1차 메뉴 */
nav.top-menu > ul {
  background-color:blue;
}
/* 1차 메뉴 아이템*/
nav.top-menu > ul > li {
  background-color:red;
  display:block;
  float:left;
}
/*1차 메뉴에 막내를 추가한다*/
nav.top-menu > ul::after {
  content: "1";
  display:block;
  clear:both;
}

---

3차 풀다운 메뉴 + 꾸미기

 HTML 

<h1>메뉴만들기</h1>
<nav class="top-menu">
  <ul>
    <li><a href="#">1차 메뉴아이템 1</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a>
            <ul>
              <li><a href="#">3차 메뉴아이템 1</a></li>
              <li><a href="#">3차 메뉴아이템 2</a></li>
              <li><a href="#">3차 메뉴아이템 3</a></li>
            </ul>
        </li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
        <li><a href="#">2차 메뉴 아이템 4</a></li>
      </ul>
    </li>
    <li><a href="#">1차 메뉴아이템 2</a></li>
    <li><a href="#">1차 메뉴아이템 3</a>
      <ul>
        <li><a href="#">2차 메뉴 아이템 1</a></li>
        <li><a href="#">2차 메뉴 아이템 2</a></li>
        <li><a href="#">2차 메뉴 아이템 3</a></li>
        <li><a href="#">2차 메뉴 아이템 4</a></li>
      </ul>
    </li>
    <li><a href="#">1차 메뉴아이템 4</a></li>
  </ul>
</nav>

 

CSS

/*노멀라이즈*/
nav, ul, li {
  list-style:none;
  padding:0;
  margin:0;
}
a {
  text-decoration:inherit;
  color:inherit;
}
/*노멀라이즈 끝*/
/* 메뉴박스*/
nav.top-menu {
  text-align:center;
}

/* 메뉴 아이템 */
nav.top-menu li {
  background-color:gray;
  position:relative;
}
/* 마우스가 올려진 메뉴 아이템*/
nav.top-menu li:hover {
  background:black;
}
/* 마우스가 올려진 메뉴 아이템의 자식 text  */
nav.top-menu li:hover > a {
  color:white;
}
/*2차 메뉴를 포함한 모든 서브메뉴*/
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;
}
/* 1차 메뉴 */
nav.top-menu > ul {
  display:inline-block;
  padding:0 10px;
  background-color:gray;
  border-radius:5px;
}
/* 1차 메뉴 아이템*/
nav.top-menu > ul > li {
  display:block;
  float:left;
}
/*1차 메뉴에 막내를 추가한다*/
nav.top-menu > ul::after {
  content: "";
  display:block;
  clear:both;
}

nav.top-menu a {
  white-space:nowrap;
  padding:10px;
  display:block;
}

 

 

---

UI 혼란 

:사용자가 버튼인줄 알고 클릭해도 실행이 안됨 .

 

혼란을 줄이기 위해

접근성을 위하여 a 를 블럭처리함 .

 

HTML

<h1>예제</h1>

<ul>
  <li><a href="#">안녕하세요</a></li>
  <li><a href="#">안녕 </a></li>
</ul>

 

CSS

ul li a{
  display:block;
  padding:10px;
}