Creating Navigation Menus with Lists in HTML
Navigation menus are commonly built using unordered lists (<ul>) with list items (<li>). This structure is semantic, accessible, and easy to style.
Basic Nav Menu Example
Nested Menus for Dropdowns
You can create submenus by nesting <ul> inside <li> elements:
Accessibility Tips
- Use semantic <nav> element to identify navigation landmarks.
- Make links focusable and provide clear visual focus styles.
- Use ARIA attributes if you implement complex dropdown menus.
Styling Navigation Menus
You can style lists and links with CSS for horizontal or vertical layouts. Using utility classes like Tailwind CSS helps speed up styling.
/* Example CSS for horizontal nav */
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
nav ul li a {
text-decoration: none;
color: #2563eb; /* blue-600 */
}
nav ul li a:hover,
nav ul li a:focus {
text-decoration: underline;
}