The coverage panel is "live", as you use the page more CSS and JS will be used.
What I mean is that when you first load the page all of the CSS and JS required to render and make interactive that initial view will be highlighted as green and needed. If you then opened your menu that CSS would turn green as it was used. If you never open your menu with the coverage panel running it will not count the CSS as needed.
So because your menu CSS code was not needed when you ran the coverage panel and you removed the CSS for the menu you obviously will have issues.
You are kind of misusing the coverage panel, it is more intended to help you optimise your critical CSS or to find libraries that are completely unused.
If you want to use it to identify CSS and JS that is not used at all you would have to resize the screen to every break point (to account for different screen sizes and the different layouts you use for mobile, tablet etc.), open every menu item, tab to all areas of the site, fill in all the forms, both correctly and incorrectly etc. to ensure all states were covered and the relevant CSS and JS was used.
If you did manage to successfully do the above, that would show you the coverage for one page, but what about other pages? You would have to repeat the process there to ensure you haven't removed a needed style. As you can imagine this is not likely to be successful without mistakes!
Instead you should use the coverage panel to identify items that are required for "above the fold" content as this means you can inline any critical CSS and JS within your initial page HTML and get sub 1 second First Contentful Paint etc. (Yet again you need to resize the screen here to account for different breakpoints, but you do not need to open menus etc.)
Don't use it to try and identify things that aren't used unless you are absolutely certain they will not be needed (for example if there is a whole library included by mistake that does not get used, you can safely remove that.)
