Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Duane Fouche
Duane Fouche
8,934 Points
Posted by Duane Fouche
Duane Fouche
8,934 Points

Convert accordion menu to drop-down menu (for desktop usage)

Hey all,

I've recently started studying front-end web development and have just started my first personal project. I decided on a mobile-first approach by making an accordion menu (using a check-box instead of radio, so it can be closed by clicking a second time). The final website I am planning will have 20-30 pages so for maintenance sake I have the header, footer, and nav in separate includes. It is currently only 1 page.

I currently cannot use Javascript, so everything has been pure css.

I have the menu looking more or less what I want it to (minus some on hover and click styling) on mobile, but I would now like to make it work better on desktops by changing it to a drop-down menu with media queries.

Unfortunately I've hit a complete blank on how to accomplish this, can anyone spare any thoughts on the best way to do this? I've been trying for an hour now but I can't seem to find a solution (I've never made a drop-down menu before and can't find anything in the library for it either).

Here is a Snapshot of my workspace thus far (was made with Sass). https://w.trhou.se/zcjhaq8337

(PS: the automatic formatting on this site is for some unbeknownst reason adding extra characters to the link, you will need to remove everything after '377').

I would appreciate any help or tips you can give.

Duane Fouche
Duane Fouche
8,934 Points
Duane Fouche
Duane Fouche
8,934 Points

The main styling for the nav is in "includes/nav.scss" if you'd like to take a look.

1 Answer

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

Hi Duane,

You can work with display modes. For example you set the display of the ul element that shows up on hover on display: none;. When you hover over it you change it to display block;

Give the parent ul element a position: relative; and the hidden ul element a position: absolute. If you understand these basics of making a dropdown menu you should be able to work out the rest yourself to your liking.