CSS만 사용하여 드롭다운 메뉴를 어떻게 만들 수 있나요?

순수한 CSS 기반 드롭다운 메뉴 생성

웹 개발에서 드롭다운 메뉴는 선택 사항을 논리적으로 구성하고 제시하는 데 사용되는 일반적인 UI 요소입니다. 외부 프레임워크나 JavaScript에 의존하지 않고 드롭다운 메뉴를 원하는 경우 순수 CSS가 적합한 솔루션을 제공할 수 있습니다.

순수한 CSS 드롭다운 메뉴 구현

순수한 CSS를 구성하려면 기반 드롭다운 메뉴에서 다음 단계를 따르세요.

1. HTML 구조: 각 목록 항목(
2. )이 메뉴 항목을 나타내는 순서가 없는 목록(<ul>)을 정의합니다. 목록 항목 내에 하위 메뉴에 대한 순서가 지정되지 않은 다른 목록을 중첩합니다.
3. 스타일링: CSS를 사용하여 메뉴 스타일을 지정합니다. 글머리 기호, 여백이 없고 가로 정렬이 없도록 ul을 설정합니다. 수평 정렬을 위해 li 요소를 인라인 블록 위치에 배치합니다.
4. 드롭다운 표시 여부: 하위 메뉴 표시 여부를 전환하려면 목록 항목에서 :hover 의사 클래스를 사용합니다. 목록 항목 위에 마우스를 올리면 해당 하위 메뉴(ul)가 표시됩니다.
5. 메뉴 모양: 배경색과 같은 CSS 속성을 사용하여 메뉴 항목, 하위 메뉴 및 링크의 모양을 사용자 정의합니다. 색상, 패딩.

예 코드

다음 코드 조각은 순수한 CSS 기반 드롭다운 메뉴의 예를 제공합니다.

HTML:

<ul>

CSS:

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

라이브 데모: [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

위 내용은 CSS만 사용하여 드롭다운 메뉴를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!