HTML 및 CSS만 사용하여 드롭다운 메뉴 만들기

나는 사이트 제작에서'하단 메뉴'는 상당히 필요한 지식이라고 생각한다.그러니까 총괄해 봐.
구체적인 절차는 먼저 html로 목록을 작성한 다음에 css로 밑에 있는 메뉴를 만드는 것이다.

ul로 목록 만들기

먼저 드롭다운 목록이 될 목록을 만듭니다.CSS가 아니라 html로만 제작되기 때문에 아래와 같이 매우 간단한 목록입니다.

    <div class="menu">
      <div class="menu-title">Main Menu</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu2</a></li>
          <li><a href="#">Sub Menu3</a></li>
        </ul>
      </div>
    </div>

CSS에서 드롭다운

설계 프레임

일단 큰 틀을 만들자.
main menu와sub menu를 좋은 박스로 만들자.

 /* まずはメニューの大枠を作る */

.menu {
  width: 300px;
  text-align: center;
  background: navy;
  color: white;
}

.sub-menu {
  background: white;
}


 /* わかりやすいようにボーダーも */
li{
    border: 1px solid navy;
}

다만 이렇게 하면 들여쓰기와 연결을 암시하는 파란색, 밑줄이 남아 있다.우리 그곳을 수리합시다.

위치 조정, 링크 색상

 /* 上記CSSに加えます */

 /* list-styleでlistの"・"をなくします */
 /* paddingでインデントもなくします */

ul {
  width: 300px;
  list-style: none;
  margin: 0; 
  padding: 0;
}

 /* リンクっぽい青色、下線部をなくす */

a {
  text-decoration: none;
  color: navy;
}

드디어 드롭하네요.

틀이 다 됐어!마침내, 일반적으로 하위 메뉴를 숨기고 마우스가 멈출 때 표시되는 CSS를 씁니다.
구체적으로 말하면 숨겨진sub-menu류에'display:none;'가 있다."display:block;"의 명세란 스타일에 정의된 설정입니다.

 /* sub menuを非表示にする */

.sub-menu {
  display: none; /* ← ここ追加 */
  background: white;
}

 /* マウスホバー時に表示させる */

.menu:hover .sub-menu {
  display: block;
}

이렇게 하면 완성!
이것이 바로

마우스 스톱

그렇습니다!
최종 코드는
HTML

    <div class="menu">
      <div class="menu-title">Main Menu</div>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Sub Menu1</a></li>
          <li><a href="#">Sub Menu2</a></li>
          <li><a href="#">Sub Menu3</a></li>
        </ul>
      </div>
    </div>

CSS

.menu {
  width: 300px;
  text-align: center;
  background: navy;
  color: white;
}

.sub-menu {
  background: white;
  display: none;
}

li{
  border: 1px solid navy;
}

ul {
  width: 300px;
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: navy;
}

.menu:hover .sub-menu {
  display: block;
}

참조:https://public-constructor.com/html-css-dropdown-menu/
왠지 못할 것 같을 때 여기 있어요.
http://webfeelfree.com/mouseover-css-hover/