0

My menu bar does not work properly

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

25th Jun 2023, 11:38 AM
PARMAR AAYUSH
PARMAR AAYUSH - avatar
4 odpowiedzi
0
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%; } ```
26th Jun 2023, 11:23 PM
Dian Lerry Gabatin Lizardo (Dian)
Dian Lerry Gabatin Lizardo (Dian) - avatar
0
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.
26th Jun 2023, 11:24 PM
Dian Lerry Gabatin Lizardo (Dian)
Dian Lerry Gabatin Lizardo (Dian) - avatar
0
Thank you Dian 🙂.
27th Jun 2023, 2:30 AM
PARMAR AAYUSH
PARMAR AAYUSH - avatar
0
Dian Lerry Gabatin Lizardo (Dian) its not work bro i tried, occurred problem my submenu goes down when i applied top:100%
29th Jun 2023, 5:54 AM
PARMAR AAYUSH
PARMAR AAYUSH - avatar