2nd/10_Wiki/Topic_CSS/CSS_Dropdowns.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-dropdowns	CSS Dropdowns	Frontend	draft	conceptual		dropdown CSS dropdown menu hover dropdown dropdown box pure CSS dropdown		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools dropdown hover menu	https://www.w3schools.com/css/css_dropdowns.asp

CSS Dropdowns

🎯 한 줄 통찰 (One-line insight)

A CSS dropdown reveals hidden content on hover by combining a position: relative wrapper, an absolutely positioned display: none content box, and a :hover rule that flips it to display: block — no JavaScript required. [S1]

🧠 핵심 개념 (Core concepts)

• Dropdown — a UI element that displays content (text, links, images) when the user moves over or interacts with a trigger element such as a div, button, p, or a. [S1]
• Wrapper positioning — the outer .dropdown container is given position: relative so the dropdown content can be positioned relative to it. [S1]
• Hidden-by-default content — .dropdown-content starts at display: none and position: absolute, so it does not occupy space until shown. [S1]
• Hover reveal — the .dropdown:hover .dropdown-content rule sets display: block, exposing the content while the pointer is over the wrapper. [S1]
• Visual depth — a box-shadow is used to give the dropdown box a floating, layered appearance. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Relative-parent / absolute-child — pair a position: relative wrapper with a position: absolute content box so the box anchors to the wrapper. [S1]
• Hover toggle — switch a child from display: none to display: block via a parent :hover descendant selector, achieving show/hide without scripting. [S1]
• Styled trigger button — a .dropbtn class styles the trigger (background color, padding, no border, pointer cursor) and changes color on parent hover. [S1]

📖 세부 내용 (Details)

What is a CSS dropdown? A CSS dropdown is a UI element that displays content when users click or hover over a trigger element like a button or link. The trigger can be a div, button, p, or a tag, and the hidden dropdown content displays on interaction. [S1]

Example 1 — Dropdown Box with Text A basic hoverable dropdown. The parent uses position: relative; the .dropdown-content is hidden (display: none) and absolutely positioned, with a min-width of 130px and a box-shadow for depth. The :hover selector reveals it: [S1]

<style>
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">Mouse over me!
  <div class="dropdown-content">Hello World!</div>
</div>

Example 2 — Dropdown Menu Extends the dropdown into an interactive menu. A styled .dropbtn button (green #4CAF50 background, white text, 16px padding) triggers the menu; links inside .dropdown-content are block-level with padding and no underline, and change background on hover. The button darkens (#3e8e41) when the dropdown is hovered: [S1]

<style>
.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

🛠️ 적용 사례 (Applied in summary)

The two examples on the page are the applied demonstrations: a text dropdown box and a link-based dropdown menu, both shown as complete self-contained markup. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Core relative-parent / hover-reveal pattern (language: CSS):

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Advanced Dropdowns, CSS Position, CSS Navigation Bar
• 참조 맥락: Referenced whenever building hoverable menus, tooltips, or pop-over content panels in pure CSS.

📚 출처 (Sources)

• [S1] W3Schools — CSS Dropdowns — https://www.w3schools.com/css/css_dropdowns.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Dropdowns" page (Astra wiki-curation, P-Reinforce v3.1 format).