How to inspect code in drop down menus?

Question

css

Give me ideas how to use the code inspector (F12) to view the css code of classes for dynamic menus and for :hover selectors.
The menu is just hidden. If important, this is the report page in SSRS drop-down format selection menu.
I'll add a little. The main idea was to change this drop-down menu, the so-called. "SharePoint branding".
I will give the received code, so that in the future they would not suffer.

<div class="ms-core-menu-box ms-core-menu-hasIcons ms-core-defaultFont ms-shadow" role="menu" title="" dir="ltr" contenteditable="false" style="top: 52px; position: absolute; visibility: visible; left: 4px; width: 250px;" flipped="false"><ul class="ms-core-menu-list"><li type="option" onmenuclick="STSNavigate2(event,'http://sharepoint2016/sites/portal/_layouts/15/ReportServer/RSAction.aspx?RSAction=ReportBuilderViewer&amp;ReportPath=http%3a%2f%2fsharepoint2016%2fsites%2fportal%2fLib%2f05+%d0%93%d0%b5%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5+%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d1%8b%2f05_01_FondStructure.rdl');" text="Открыть в построителе отчетов" callbackitem="true" menugroupid="2147483647" enabled="true" checked="false" onmenuclick_original="STSNavigate2(event,'http://sharepoint2016/sites/portal/_layouts/15/ReportServer/RSAction.aspx?RSAction=ReportBuilderViewer&amp;ReportPath=http%3a%2f%2fsharepoint2016%2fsites%2fportal%2fLib%2f05+%d0%93%d0%b5%d0%be%d0%bb%d0%be%d0%b3%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5+%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d1%8b%2f05_01_FondStructure.rdl');" text_original="Открыть в построителе отчетов" valorig="
" id="mp1_0_0" class="ms-core-menu-item   ms-core-menu-itemSelected"><a class="ms-core-menu-link" id="mp1_0_0_Anchor" href="javascript:;" onclick="return false;" title="Открыть в построителе отчетов"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_ReportBuilder_forRendering"><span class="ms-core-menu-title">Открыть в построителе отчетов</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="option" text="Новое предупреждение данных" callbackitem="true" menugroupid="2147483647" enabled="false" text_original="Новое предупреждение данных" valorig="
" id="mp1_0_1" class="ms-core-menu-item ms-core-menu-itemDisabled"><a class="ms-core-menu-link" id="mp1_0_1_Anchor" href="javascript:;" onclick="return false;" aria-disabled="true" title="Новое предупреждение данных"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_DataAlert_forRendering"><span class="ms-accessible ms-core-menu-disabledText">Отключено</span><span class="ms-core-menu-title">Новое предупреждение данных</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="option" text="Подписка" callbackitem="true" menugroupid="2147483647" enabled="false" text_original="Подписка" valorig="
" id="mp1_0_2" class="ms-core-menu-item ms-core-menu-itemDisabled"><a class="ms-core-menu-link" id="mp1_0_2_Anchor" href="javascript:;" onclick="return false;" aria-disabled="true" title="Подписка"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_Subscribe_forRendering"><span class="ms-accessible ms-core-menu-disabledText">Отключено</span><span class="ms-core-menu-title">Подписка</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="option" onmenuclick="$find('m_sqlRsWebPart_ctl00_ReportViewer').invokePrintDialog();" text="Печать" callbackitem="true" menugroupid="2147483647" enabled="true" checked="false" onmenuclick_original="$find('m_sqlRsWebPart_ctl00_ReportViewer').invokePrintDialog();" text_original="Печать" valorig="
" id="mp1_0_3" class="ms-core-menu-item"><a class="ms-core-menu-link" id="mp1_0_3_Anchor" href="javascript:;" onclick="return false;" title="Печать"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_Print_forRendering"><span class="ms-core-menu-title">Печать</span><span></span></div><span class="ms-accessible"></span><div></div></a></li><li type="submenu" text="Экспорт" callbackitem="true" id="mp1_0_4" class="ms-core-menu-item ms-core-menu-hasArrow"><a class="ms-core-menu-link" id="mp1_0_4_Anchor" href="javascript:;" onclick="return false;" title="Экспорт"><div class="ms-core-menu-icon"></div><div class="ms-core-menu-label" id="m_sqlRsWebPart_RSWebPartToolbar_ctl00_RptControls_RSActionMenu_Export"><span class="ms-core-menu-title">Экспорт</span><span></span></div><span class="ms-accessible"></span><div class="ms-core-menu-arrowBox"><img class="ms-core-menu-arrow" src="/_layouts/15/images/MArr.gif" alt="Подменю" title=""></div></a></li></ul></div>

Answer 1

In general, a solution that suited me was found.
1. open the code inspector F12
2. Enter the code in the console 3. Have time to open the desired element in 5 seconds 4. Wait until the debugger window is displayed 5. Select the desired element with the selector setTimeout(function(){debugger;}, 5000)

Answer 2

Answer 3

If the menu is hidden when the cursor leaves, or otherwise, then when it opens, right-click on it, and a context menu will appear. Next, move the cursor to the developer panel and do your work there. While doing things, do not click on the page.