My menu bar does not work properly

Question

In this code i have 2 major issues one is with when i
(1) run code and hover on list elements its show but i am not able to click in the desktop version.
(2) not show the sub menu proper in the responsive version. It overlaps on the main menu
https://code.sololearn.com/W1M2vDPNE9tu/?ref=app

Answer 1

To address the issues you mentioned, I noticed a couple of changes you need to make to your code:

1. For the issue of not being able to click the list elements in the desktop version, you need to add some CSS to make the dropdown menus visible on hover and clickable. You can achieve this by modifying your CSS as follows:

```css
nav ul li:hover > ul {
display: block;
}

nav ul ul {
display: none;
position: absolute;
top: 100%;
background-color: #f9f9f9;
}

nav ul ul li {
float: none;
width: 100%;
}

nav ul ul a {
padding: 10px;
color: #333;
}

nav ul ul a:hover {
background-color: #e5e5e5;
}

nav ul ul ul {
top: 0;
left: 100%;
}
```

2. To fix the issue of the submenus overlapping on the main menu in the responsive version, you can modify your CSS to make the submenus appear below their parent menu items. Add the following CSS code:

```css
nav ul li {
position: relative;
}

nav ul li:hover > ul {
top: 100%;
}
```

Answer 2

With these CSS modifications, your dropdown menus should become clickable in the desktop version, and the submenus should no longer overlap the main menu in the responsive version.

Make sure to link the updated CSS file in your HTML:

```
<link rel="stylesheet" href="./public/css/header.css">
```

After implementing these changes, your menu bar should work properly.

Answer 3

Thank you Dian 🙂.

Answer 4

Dian Lerry Gabatin Lizardo (Dian) its not work bro i tried, occurred problem my submenu goes down when i applied top:100%