Stop dropdown menu from closing while debugging CSS
An usefulChrome debugging tip for inspecting dropdown menus!
2 min readJun 30, 2019
CSS debugging tool is awesome. We normally use the Chrome CSS inspectors to try out quick experiments and quickly find out what certain page or components look like when certain styles are applied.
However, you may find CSS inspection impossible if your component is a dropdown menu, which closes every time you click away for inspection…
To stop the dropdown menu from closing:
- Set a break point on the parent node of the dropdown menu
2. Click on the parent node to open the dropdown menu. You will notice that the debugger may pause a few times before the menu is opened
3. Time to investigate and play around the styles on the dropdown menu now that it does not close as soon as you click away!
