20250825 - 학습일지 -overflow 외

• overflow 속성 추가 확인요

DIV{
  WIDTH:500PX;
  BORDER : 10PX RED SOLID;
  white-space:nowrap;
 
  text-overflow : ellipsis;
  /*
  overflow : hidden;
  overflow-x : hidden;
  text-overflow : ellipsis;... 처리
  
  */
}

-Emmet 코딩

nav.menumox>ul>li*5>a{href=#}
nav.menumox>ul>li*5>a{href=#}{1차 메뉴구성}+ul>li*3>a{href=#}{2차메뉴구성}코드를 입력하세요

• 메뉴 따라하기

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}
a {
  color:inherit;
  text-decoration:none;
}

.menu-box-1 {
  text-align:center;
}

.menu-box-1 ul {
  background-color:#afafaf;
}
.menu-box-1 > ul {
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}

.menu-box-1 > ul > li {
  display:inline-block;
}
.menu-box-1 ul > li {
  position:relative;
}

.menu-box-1 ul > li > a {
  display:block;
  padding:10px;
  white-space:nowrap;
}

.menu-box-1 ul > li:hover > a {
  background-color:black;
  color:white;
}

.menu-box-1 > ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
}

.menu-box-1 > ul ul ul {
  left:100%;
  top:0;
}

.menu-box-1 ul > li:hover > ul {
  display:block;
}

.menu-box-1 > ul > li:last-child > ul ul {
  left:auto;
  right:100%;
}

<nav class="menu-box-1">
  <ul>
    <li>
      <a href="#">1차 메뉴 아이템 1</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </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>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 2</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </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>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 3</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </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>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">1차 메뉴 아이템 4</a>
      <ul>
        <li>
          <a href="#">2차 메뉴 아이템 1</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </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>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 3</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">2차 메뉴 아이템 4</a>
          <ul>
            <li><a href="#">3차 메뉴 아이템 1</a></li>
            <li><a href="#">3차 메뉴 아이템 2</a></li>
            <li><a href="#">3차 메뉴 아이템 3</a></li>
            <li><a href="#">3차 메뉴 아이템 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>코드를 입력하세요