CSS만 사용하여 가로 드롭다운 메뉴를 만드는 방법은 무엇입니까?

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

수평 드롭다운 메뉴는 순수 CSS를 사용하여 쉽게 만들 수 있으므로 다양한 브라우저에서 호환성이 보장됩니다. 달성하는 방법은 다음과 같습니다. 이:

HTML:

<ul>

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

데모:

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

작성자 이러한 CSS 규칙을 HTML 코드에 적용하면 순수 CSS를 사용하여 모든 기능을 갖춘 브라우저 간 호환 드롭다운 메뉴를 만들 수 있습니다.

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