0

I would like to inspect the rollover status of a drop-down menu. I tried to do that with the Chrome inspector and its Toggle Element State feature as you can see here:

:hover state toggled on within the Chrome DevTools

Though this way doesn't work for me.

I would like to inspect the submenu of this site: http://demo.qodeinteractive.com/strata/

So I can add some extra CSS rules while the menu is still open.

How can I do that?

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
mattia
  • 591
  • 2
  • 7
  • 22

1 Answers1

1

After taking a quick glance, you can add class = "drop_down_start" to the nested div for the specific menu header to want to investigate. As long as that class is present, the sub-menu will be visible/displayed.

Simply right click the element in the inspector -> Edit as HTML -> add the class drop_down_start

before:

<div class="second bellow_header" style="height: 0px; top: 85px;"><div class="inner"><ul>

after:

<div class="second bellow_header drop_down_start" style="height: 0px; top: 85px;"><div class="inner"><ul>

NOTE:

The menu will persistently try to close. So, if needed, disable javascript.

Travis Clarke
  • 5,951
  • 6
  • 29
  • 36
  • thanks @travis, works well. i am thinking, is this the only method to do this? – mattia Mar 16 '15 at 14:01
  • @mattia Actually there is. Check out this post [here](http://stackoverflow.com/a/10213800/4279440). This allows you to view events fired on an element in Chrome Web Developer? This event to catch in this case would be the `mouseout....so Sources > Event Listener Breakpoints > Mouse > mouseout` It will in essence freeze the page on `mouseout` events aka when you attempt to remove your mouse from the nav item. Then you can browse at the element styles as you please. – Travis Clarke Mar 16 '15 at 14:11