• in
InterCourses
CoursesBlogs
0
← CSS
○CSS Rule Demo: Style an Exhibit Card○Exercise: Write Your First CSS Rule○CSS Selectors Demo: Target Exhibit Details○Exercise: Target Exhibit Details○Apply CSS Demo: Three Sources○Exercise: Apply CSS Three Ways○Specificity Demo: Resolve a Style Conflict○Exercise: Resolve Specificity✦Module Quiz
○Color Palette Demo○Color Palette Exercise○Background Layer Demo○Background Layer Exercise○Type Rhythm Demo○Type Rhythm Exercise○Borders and Shadows Demo○Exercise: Borders and Shadows✦Module Quiz
○Box Model Demo: Seed Packet Card○Exercise: Space a Seed Packet○Display Demo: Swap Table Labels○Exercise: Arrange Swap Table Labels○Positioning Demo: Pickup Pin○Exercise: Pin the Pickup Location○Sizing and Overflow Demo○Exercise: Size a Seed-Swap Notice✦Module Quiz
○Advanced Selectors Demo: Book Cart Sign○Exercise: Target a Book Cart Sign○Pseudo-Classes Demo: Night Cart States○Exercise: Style Night Cart States○Pseudo-Elements Demo○Exercise: Add a Book-Quote Mark
●Lantern Market navigation demo○Lantern Market navigation exercise
○Community garden request card demo○Community garden request card exercise
○Flex Direction Demo○Exercise: Flex Direction○Main-Axis Spacing Demo○Exercise: Main-Axis Spacing○Cross-Axis Alignment Demo○Exercise: Cross-Axis Alignment○Wrapping and Flex Items Demo○Exercise: Wrapping and Flex Items○Flexbox Navigation Demo○Exercise: Flexbox Navigation
○Grid Tracks Demo○Exercise: Grid Tracks○Grid Gaps Demo○Exercise: Grid Gaps○Grid Placement Demo○Exercise: Grid Placement○Responsive Grid Demo○Exercise: Responsive Grid
○River radio schedule demo○River radio schedule exercise
○Field note color system demo○Field note color system exercise○Transforms Demo○Exercise: Rotate a Field Note
○Kite festival signal demo○Kite festival signal exercise
○Garden forecast demo○Harbor forecast exercise○Fluid sizing demo○Fluid weather bulletin exercise✦Module Quiz
○Seed inventory table demo○Tool checkout table exercise✦Module Quiz
○Community maker profile demo○Maker profile sheet exercise✦Module Quiz

Lantern Market navigation demo

Lantern Market dropdown demo

A visitor needs to find the tea and paper stalls without cluttering the navigation. This finished menu starts with its links hidden, then reveals them to a pointer or a keyboard user.

In style.css, .menu-item is position: relative, so the absolutely positioned .submenu sits below the Stalls button. display: none hides the submenu initially. The :hover rule reveals it when the pointer is over the menu; :focus-within reveals it whenever the button or one of its links has keyboard focus. The links are display: block, so they stack without Flexbox or Grid (both come later). The blue :focus-visible outline makes the focused control easy to find.

Checkpoint: hover over Stalls to see the links; move away, then press Tab until Stalls is focused and use Tab again to reach Tea counter. The submenu stays visible while focus is inside it. This is a small CSS-only example: it does not implement click-to-toggle, Escape-to-close, or touch-menu behavior.

Change .submenu background temporarily, run Preview and check the open menu; restore #f7c948 before the exercise.

Hint 1
1 / 2
HINT 1

Keep the stylesheet linked from the document head.

HINT 2

Change one declaration at a time, then use Run Preview to inspect the result.

Loading editor…
READY
intercourses
html