2:00 AM thought 💠🤔
Context: How can I create a responsive, accessible, and SEO-friendly multi-level dropdown navigation menu using only HTML and CSS (no JavaScript)?
User's Answer:
Unfortunately, the user's answer is not provided. Let's create a responsive, accessible, and SEO-friendly multi-level dropdown navigation menu using only HTML and CSS.
Solution:
To create a responsive, accessible, and SEO-friendly multi-level dropdown navigation menu using only HTML and CSS, follow these steps:
HTML Structure
1<nav>
2 <ul>
3 <li><a href="#">Parent 1</a>
4 <ul>
5 <li><a href="#">Child 1.1</a></li>
6 <li><a href="#">Child 1.2</a></li>
7 </ul>
8 </li>
9 <li><a href="#">Parent 2</a>
10 <ul>
11 <li><a href="#">Child 2.1</a></li>
12 <li><a href="#">Child 2.2</a></li>
13 </ul>
14 </li>
15 </ul>
16</nav>
1<nav>
2 <ul>
3 <li><a href="#">Parent 1</a>
4 <ul>
5 <li><a href="#">Child 1.1</a></li>
6 <li><a href="#">Child 1.2</a></li>
7 </ul>
8 </li>
9 <li><a href="#">Parent 2</a>
10 <ul>
11 <li><a href="#">Child 2.1</a></li>
12 <li><a href="#">Child 2.2</a></li>
13 </ul>
14 </li>
15 </ul>
16</nav>
CSS Styles
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5 display: flex;
6 flex-direction: column;
7 align-items: flex-start;
8}
9
10nav ul > li {
11 margin-bottom: 10px;
12}
13
14nav ul > li > a {
15 text-decoration: none;
16 color: #333;
17}
18
19nav ul > li > ul {
20 position: absolute;
21 top: 0;
22 left: 0;
23 background-color: #f9f9f9;
24 padding: 10px;
25 border: 1px solid #ddd;
26 display: none;
27}
28
29nav ul > li:hover > ul {
30 display: block;
31}
32
33nav ul > li > ul > li {
34 margin-bottom: 10px;
35}
36
37nav ul > li > ul > li > a {
38 text-decoration: none;
39 color: #333;
40}
1nav ul {
2 list-style: none;
3 margin: 0;
4 padding: 0;
5 display: flex;
6 flex-direction: column;
7 align-items: flex-start;
8}
9
10nav ul > li {
11 margin-bottom: 10px;
12}
13
14nav ul > li > a {
15 text-decoration: none;
16 color: #333;
17}
18
19nav ul > li > ul {
20 position: absolute;
21 top: 0;
22 left: 0;
23 background-color: #f9f9f9;
24 padding: 10px;
25 border: 1px solid #ddd;
26 display: none;
27}
28
29nav ul > li:hover > ul {
30 display: block;
31}
32
33nav ul > li > ul > li {
34 margin-bottom: 10px;
35}
36
37nav ul > li > ul > li > a {
38 text-decoration: none;
39 color: #333;
40}
Responsive Design
To make the dropdown menu responsive, add the following CSS:
1@media (max-width: 768px) {
2 nav ul {
3 flex-direction: column;
4 }
5 nav ul > li {
6 margin-bottom: 10px;
7 }
8 nav ul > li > ul {
9 position: relative;
10 top: auto;
11 left: auto;
12 background-color: #f9f9f9;
13 padding: 10px;
14 border: 1px solid #ddd;
15 display: block;
16 }
17 nav ul > li > ul > li {
18 margin-bottom: 10px;
19 }
20 nav ul > li > ul > li > a {
21 text-decoration: none;
22 color: #333;
23 }
24}
1@media (max-width: 768px) {
2 nav ul {
3 flex-direction: column;
4 }
5 nav ul > li {
6 margin-bottom: 10px;
7 }
8 nav ul > li > ul {
9 position: relative;
10 top: auto;
11 left: auto;
12 background-color: #f9f9f9;
13 padding: 10px;
14 border: 1px solid #ddd;
15 display: block;
16 }
17 nav ul > li > ul > li {
18 margin-bottom: 10px;
19 }
20 nav ul > li > ul > li > a {
21 text-decoration: none;
22 color: #333;
23 }
24}
Accessibility
To make the dropdown menu accessible, add the following attributes to the HTML:
1<nav>
2 <ul>
3 <li><a href="#" aria-haspopup="true" aria-expanded="false">Parent 1</a>
4 <ul>
5 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 1.1</a></li>
6 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 1.2</a></li>
7 </ul>
8 </li>
9 <li><a href="#" aria-haspopup="true" aria-expanded="false">Parent 2</a>
10 <ul>
11 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 2.1</a></li>
12 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 2.2</a></li>
13 </ul>
14 </li>
15 </ul>
16</nav>
1<nav>
2 <ul>
3 <li><a href="#" aria-haspopup="true" aria-expanded="false">Parent 1</a>
4 <ul>
5 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 1.1</a></li>
6 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 1.2</a></li>
7 </ul>
8 </li>
9 <li><a href="#" aria-haspopup="true" aria-expanded="false">Parent 2</a>
10 <ul>
11 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 2.1</a></li>
12 <li><a href="#" aria-haspopup="true" aria-expanded="false">Child 2.2</a></li>
13 </ul>
14 </li>
15 </ul>
16</nav>
SEO-Friendliness
To make the dropdown menu SEO-friendly, add the following attributes to the HTML:
1<nav>
2 <ul>
3 <li><a href="#" rel="nofollow" title="Parent 1">Parent 1</a>
4 <ul>
5 <li><a href="#" rel="nofollow" title="Child 1.1">Child 1.1</a></li>
6 <li><a href="#" rel="nofollow" title="Child 1.2">Child 1.2</a></li>
7 </ul>
8 </li>
9 <li><a href="#" rel="nofollow" title="Parent 2">Parent 2</a>
10 <ul>
11 <li><a href="#" rel="nofollow" title="Child 2.1">Child 2.1</a></li>
12 <li><a href="#" rel="nofollow" title="Child 2.2">Child 2.2</a></li>
13 </ul>
14 </li>
15 </ul>
16</nav>
1<nav>
2 <ul>
3 <li><a href="#" rel="nofollow" title="Parent 1">Parent 1</a>
4 <ul>
5 <li><a href="#" rel="nofollow" title="Child 1.1">Child 1.1</a></li>
6 <li><a href="#" rel="nofollow" title="Child 1.2">Child 1.2</a></li>
7 </ul>
8 </li>
9 <li><a href="#" rel="nofollow" title="Parent 2">Parent 2</a>
10 <ul>
11 <li><a href="#" rel="nofollow" title="Child 2.1">Child 2.1</a></li>
12 <li><a href="#" rel="nofollow" title="Child 2.2">Child 2.2</a></li>
13 </ul>
14 </li>
15 </ul>
16</nav>
By following these steps, you can create a responsive, accessible, and SEO-friendly multi-level dropdown navigation menu using only HTML and CSS.
