What it shows
A list of links is turned into a horizontal menu using flexbox, with hover and active-page colours. It shows how a real website’s menu is made from simple lists.
The science
A menu is just an unordered list of links. CSS removes the bullets with list-style: none and sets display: flex on the ul so the items sit in a row. Making each link display: block gives it a large clickable area. The :hover selector changes the look when the mouse is over a link, and a class named active marks the current page.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor and a web browser (free)
- Three small pages: index.html, about.html and contact.html in one folder
- A notebook and a pencil
Safety
This project uses safe, everyday materials. Still, read the rules below with a parent before you start.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create style.css and three pages that each link to it with <link rel="stylesheet" href="style.css">.
In every page add inside body: <nav><ul><li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li></ul></nav>.
In style.css write nav ul { list-style: none; margin: 0; padding: 0; display: flex; background: #1f3a5f; }.
Write nav a { display: block; padding: 14px 22px; color: white; text-decoration: none; }.
Write nav a:hover { background: #2f5f9f; } and nav a.active { background: #c0392b; }.
On each page add class="active" to the link of that page, for example <a class="active" href="about.html">About</a> in about.html.
Put a different heading and paragraph on each page, open index.html and click through the menu.
Add nav ul { justify-content: flex-end; } to push the menu to the right and note the change.
What you should see
A coloured bar of three links runs across every page. The link under the mouse lightens and the link of the current page is shown in red.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What kind of tag holds the menu links?
An unordered list with a list item for each link.
2Why set the link to display: block?
So the whole padded area, not just the text, can be clicked.
3What is a class?
A label added to a tag so CSS can style it separately.
4Why keep one CSS file for all pages?
The menu looks the same on all pages and one change updates them all.
Take it further
Make the menu stack vertically on narrow screens using a media query that sets flex-direction: column.
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
English & skills
Handbook for Computer Teachers
Plan lessons, run a computer lab and help every student learn