순수한 CSS 드롭다운 메뉴를 만드는 방법은 무엇입니까?

순수한 CSS 드롭다운 메뉴 만들기

웹 디자인 영역에서 원활하고 사용자 친화적인 탐색 메뉴를 만드는 능력은 최고의. 다양한 메뉴 스타일 중에서 드롭다운 메뉴는 탐색 옵션을 우아하게 구성하고 표시하는 기능이 두드러집니다. 이 기사에서는 기능적일 뿐만 아니라 시각적으로도 시선을 사로잡는 순수한 CSS 드롭다운 메뉴를 만드는 복잡한 기술을 탐구할 것입니다.

HTML 구조

기본 드롭다운 메뉴는 비교적 간단합니다. 메뉴 항목의 컨테이너 역할을 하는 순서가 지정되지 않은 목록(<ul>)으로 시작합니다. 목록 내에서 각 메뉴 항목은 목록 항목(

)으로 표시됩니다.

예제 HTML:

<ul>

CSS 스타일링

HTML 구조를 기능적 드롭다운 메뉴로 변환하기 위해 다음 CSS를 사용합니다. 스타일:

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

ul li {
  display: block;
  position: relative;
  float: left;
}

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;
}

작동 방식

초기 스타일은 글꼴, 여백 및 패딩을 포함하여 메뉴의 전체 모양을 설정합니다. 기본 표시 속성은 li 요소에 대해 차단으로 설정되어 수평으로 표시되도록 합니다. 드롭다운 하위 메뉴는 표시 속성을 없음으로 설정하여 처음에 숨겨집니다.

호버 상태는 위치: 절대를 사용하여 하위 메뉴를 상위 항목 아래에 정렬하도록 정의됩니다. 또한 하위 메뉴의 li 및 a 요소는 스타일을 상속하여 일관된 모양을 유지합니다. 하위 하위 메뉴 항목 위로 마우스를 가져가면 배경색이 추가로 변경됩니다.

결론

순수한 CSS 드롭다운 메뉴를 만들려면 신중한 HTML 구조화와 사려 깊은 CSS 스타일 지정이 필요합니다. 이러한 기술을 숙달함으로써 웹 디자이너는 사용자 경험을 향상시키고 창의성을 선보이는 우아하고 기능적인 탐색 메뉴의 힘을 발휘할 수 있습니다.

위 내용은 순수한 CSS 드롭다운 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!