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

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

세련되고 브라우저와 호환되는 수평 드롭다운 메뉴가 필요하십니까? CSS만으로 이를 달성하는 데 도움이 되는 가이드는 다음과 같습니다.

1. HTML 구조

중첩된

메뉴 계층 구조를 나타내는 구조:

2. CSS 스타일링

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

실제 보기

다음을 방문하세요. 순수한 CSS 드롭다운 메뉴를 경험해 보려면 다음 데모를 따르세요.

http://jsfiddle.net/XPE3w/7/

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