koriweb
9609c04755
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
283 lines
8.2 KiB
Markdown
283 lines
8.2 KiB
Markdown
---
|
|
id: css-advanced-dropdowns
|
|
title: "CSS Advanced Dropdowns"
|
|
category: "Frontend"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["advanced dropdown", "right-aligned dropdown", "dropdown image", "dropdown navbar", "navbar dropdown"]
|
|
duplicate_of: ""
|
|
source_trust_level: "B"
|
|
confidence_score: 0.88
|
|
created_at: 2026-06-23
|
|
updated_at: 2026-06-23
|
|
review_reason: ""
|
|
merge_history: []
|
|
tags: ["css", "web", "frontend", "w3schools", "dropdown", "navbar", "alignment"]
|
|
raw_sources: ["https://www.w3schools.com/css/css_dropdowns_advanced.asp"]
|
|
applied_in: []
|
|
github_commit: ""
|
|
---
|
|
|
|
# [[CSS Advanced Dropdowns]]
|
|
|
|
## 🎯 한 줄 통찰 (One-line insight)
|
|
Building on the basic hover dropdown, advanced dropdowns control alignment with `right: 0;` / `left: 0;`, embed images in the content box, and drop the menu into a floated navbar `<li class="dropdown">`. [S1]
|
|
|
|
## 🧠 핵심 개념 (Core concepts)
|
|
- **Alignment control** — whether the dropdown content opens left-to-right or right-to-left is determined by the `left` and `right` properties on `.dropdown-content`; adding `right: 0;` makes it go from right to left. [S1]
|
|
- **Inline-block wrapper** — for aligned and navbar dropdowns the wrapper uses `display: inline-block` (and `position: relative`) so it sits in the flow next to siblings. [S1]
|
|
- **Stacking** — advanced dropdowns add `z-index: 1;` to the content box so it layers above following content. [S1]
|
|
- **Dropdown with image** — a dropdown can reveal an image plus a `.desc` caption instead of plain text/links, triggered by hovering an image trigger. [S1]
|
|
- **Dropdown navbar** — a dropdown can live inside a navigation bar as one `<li class="dropdown">` among other `<li>` links, with its menu absolutely positioned beneath the bar. [S1]
|
|
|
|
## 🧩 추출된 패턴 (Extracted patterns)
|
|
- **Side anchoring** — set `right: 0;` (or `left: 0;`) on the absolutely positioned content box to anchor the menu to either edge of its wrapper. [S1]
|
|
- **Image-as-trigger** — use an `<img>` as the hover trigger and reveal a larger image + caption in the content box. [S1]
|
|
- **Navbar integration** — float `<li>` items and treat one as `li.dropdown { display: inline-block; }`, sharing hover styling with the bar links via grouped selectors. [S1]
|
|
|
|
## 📖 세부 내용 (Details)
|
|
**Overview**
|
|
This page covers three advanced dropdown techniques: a right-aligned dropdown, a dropdown containing an image, and a dropdown inside a navbar. To control direction, the page notes: if you want the dropdown menu to go from right to left instead of left to right, add `right: 0;`. [S1]
|
|
|
|
**Example 1 — Right-aligned (Aligned Dropdown Content)**
|
|
Two dropdowns are floated left and right; the left one forces `left:0;` on its content while the right one uses the stylesheet default with `right: 0;`. The wrapper is `display: inline-block;` and the content box has `z-index: 1;`: [S1]
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.dropbtn {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 16px;
|
|
font-size: 16px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
background-color: #f9f9f9;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content a:hover {background-color: #f1f1f1;}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown:hover .dropbtn {
|
|
background-color: #3e8e41;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Aligned Dropdown Content</h2>
|
|
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>
|
|
|
|
<div class="dropdown" style="float:left;">
|
|
<button class="dropbtn">Left</button>
|
|
<div class="dropdown-content" style="left:0;">
|
|
<a href="#">Link 1</a>
|
|
<a href="#">Link 2</a>
|
|
<a href="#">Link 3</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown" style="float:right;">
|
|
<button class="dropbtn">Right</button>
|
|
<div class="dropdown-content">
|
|
<a href="#">Link 1</a>
|
|
<a href="#">Link 2</a>
|
|
<a href="#">Link 3</a>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**Example 2 — Dropdown with Image**
|
|
Hovering a small image reveals a larger image and a `.desc` caption inside the dropdown content: [S1]
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.desc {
|
|
padding: 15px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Dropdown Image</h2>
|
|
<p>Move the mouse over the image below to open the dropdown content.</p>
|
|
|
|
<div class="dropdown">
|
|
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
|
|
<div class="dropdown-content">
|
|
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
|
|
<div class="desc">Beautiful Cinque Terre</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**Example 3 — Dropdown Navbar**
|
|
A navigation bar (`ul` with `overflow: hidden` and a dark background) where one `<li class="dropdown">` contains a `.dropbtn` link and an absolutely positioned `.dropdown-content`. Bar links and the dropdown button share hover styling via grouped selectors: [S1]
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
h2, p {
|
|
margin: 10px;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: #38444d;
|
|
}
|
|
li {
|
|
float: left;
|
|
}
|
|
li a, .dropbtn {
|
|
display: inline-block;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
}
|
|
li a:hover, .dropdown:hover .dropbtn {
|
|
background-color: red;
|
|
}
|
|
li.dropdown {
|
|
display: inline-block;
|
|
}
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
z-index: 1;
|
|
}
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
.dropdown-content a:hover {background-color: #f1f1f1;}
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
<li><a href="#home">Home</a></li>
|
|
<li><a href="#news">News</a></li>
|
|
<li class="dropdown">
|
|
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
|
|
<div class="dropdown-content">
|
|
<a href="#">Link 1</a>
|
|
<a href="#">Link 2</a>
|
|
<a href="#">Link 3</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h2>Dropdown Menu in Navbar</h2>
|
|
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
The page's three complete examples — right/left aligned dropdowns, an image dropdown, and a navbar dropdown — are the applied demonstrations. No external project/commit applications found in the source.
|
|
|
|
## 💻 코드 패턴 (Code patterns)
|
|
Edge alignment of the content box (language: CSS):
|
|
```css
|
|
.dropdown-content {
|
|
position: absolute;
|
|
right: 0; /* anchor to right edge; use left: 0; for left edge */
|
|
z-index: 1;
|
|
}
|
|
```
|
|
Navbar dropdown item (language: CSS):
|
|
```css
|
|
li.dropdown {
|
|
display: inline-block;
|
|
}
|
|
.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.88
|
|
- **중복 검사 결과:** 신규 생성 (New discovery)
|
|
|
|
## 🔗 지식 그래프 (Knowledge Graph)
|
|
- **상위/루트:** [[CSS Tutorial]]
|
|
- **관련 개념:** [[CSS Dropdowns]], [[CSS Navigation Bar]], [[CSS Position]]
|
|
- **참조 맥락:** Referenced when a basic dropdown needs edge alignment, image content, or integration into a site navigation bar.
|
|
|
|
## 📚 출처 (Sources)
|
|
- [S1] W3Schools — CSS Advanced Dropdowns — https://www.w3schools.com/css/css_dropdowns_advanced.asp
|
|
|
|
## 📝 변경 이력 (Change history)
|
|
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Advanced Dropdowns" page (Astra wiki-curation, P-Reinforce v3.1 format).
|