How to expand navigation links to the full width of a web page

HTML-CSS
1


Above is the link of my code
i want to expand my navigation link to its full width but when i’m doing so my drop-down menu is not displaying properly.

2

Make sure that nested list items have the same width as the parent.

Try adding this styling to appropriate elements:

#nav_top ul li ul li {
width: 100%;
}
#nav_top ul li{
display: inline-block;
}

3

sir still it’s not working. here is my link- https://codepen.io/pragyapriya/pen/wYzNLL

4

That’s true it is not working properly now.

Try change this:

#nav_top ul li{
  position:relative;
  float:left;
  list-style:none;
  display:inline-block;
  /width:100%;
}

try width:14.28%; because 100% / 7 elements ~14.28%

and add this styling:

#nav_top ul li ul{
  width: 100%;
}

to make sure that parent element of the most nested list is also max possible width.

You can make it more flixbile playing with display:table; instead setting width 14% (or flexbox or grid but it can be more challenging).