2:00 AM thought 💭 🤔

2:00 AM thought 💭 🤔 | DevFlow

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}

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}

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>

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>

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>

All Questions

Top Questions

Popular Tags

2:00 AM thought 💭 🤔

1 Answer

Wirte your answer here

2:00 AM thought 💭 🤔

Solution:

HTML Structure

CSS Styles

Responsive Design

Accessibility

SEO-Friendliness