"Inspect" a hover element?

Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.

I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar, which pops up below on hover of its parent item.

The popup (or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.

However, as soon as I move my mouse away from the menu, it's gone; thus I can't select different elements in the inspection pane, and see which area is highlighted at the same time.

Is there a way around this, without changing the menu, so that it stays 'popped up' once activated?

This answer assumes that the hover element is triggered by JavaScript. If it is triggered via the CSS :hover pseudo-class, see gmo's answer.

You can inspect JavaScript-based hover elements if you pause JavaScript execution while the hover element is visible. This can be accomplished in one of the following ways:

1. Via a keyboard shortcut

Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:

1. Open up Developer Tools and go to Sources.

2. Note the shortcut to pause script execution—F8 (there may also be another depending on your OS).

   

3. Interact with the UI to get the element to appear.

4. Hit F8.

5. Now you can move your mouse around or inspect the DOM, as needed. The element will stay there.

2. Via a delayed debugger statement

Some web pages attach keydown / keypress / keyup event listeners which interfere with the shortcut above. In those cases, you can pause script execution by triggering a breakpoint via a delayed debugger statement:

1. Open the JS console, and enter:

   // Pause script execution in 5 seconds
   setTimeout(() => { debugger; }, 5000)
   

2. Trigger the hover and wait for the debugger statement to execute.