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

순전히 CSS를 사용하여 수평 드롭다운 메뉴 만들기

수평 드롭다운 메뉴는 사용자가 기본 메뉴 위로 마우스를 가져갈 수 있도록 하여 탐색하기 쉬운 환경을 제공합니다. 하위 메뉴를 표시하는 메뉴 항목입니다. CSS만으로 이 효과를 얻으려면 약간의 스타일링 능력이 필요합니다.

HTML 구조:

를 사용하여 순서가 지정되지 않은 목록(<ul>)을 만드는 것으로 시작합니다. 각 메뉴 항목의 요소입니다. 하위 메뉴는 중첩된 <ul> 요소.

CSS 스타일링:

<ul>

위치 지정: 외부 <ul> 요소를 블록으로 표시하고

요소를 사용하여 가로 레이아웃을 만듭니다.

하위 메뉴 가시성: 처음에는 표시를 없음으로 설정하여 하위 메뉴를 숨깁니다.

메뉴 항목 스타일:

<ul>

배경색, 패딩, 텍스트 정의 메뉴 항목의 색상 및 테두리.

호버 효과:

<ul>

메뉴 항목에 마우스를 올렸을 때 배경색 변경 추가 .

하위 메뉴 표시를 차단으로 설정하고 위치를 지정하여 마우스 오버 시 하위 메뉴 숨기기를 해제합니다. 물론입니다.

반응형 하위 메뉴:

<ul>

더 쉽게 마우스를 가져갈 때 하위 메뉴 항목의 글꼴 크기를 줄입니다. 가독성.

하위 메뉴 항목에 배경색 변경 추가 hover.

예제 코드:

<ul>

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

라이브 데모:
[순수한 CSS 수평 드롭다운 메뉴](http://jsfiddle.net/XPE3w/7/)

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