Weird CSS with a large submenu item in admin

[ericlewis]

With a large menu (tons of submenu pages) positioned at the bottom of the menu bar in the admin, there is some unexpected CSS behavior.

While on a submenu page (or the top-level menu page), on hover of the menu will move the submenu actually up over some of the rest of the menu items. (See screenshot)

I've traced it to a hover bind function on menus, which doesn't check if the current submenu is already opened before adjusting its CSS. If the menu is already open, it should just be left alone.

To reproduce, drop this code in.

add_action('admin_menu', 'register_custom_menu_page');

function register_custom_menu_page() {
	add_menu_page('custom menu title', 'custom menu', 'add_users', 'custompage', 'custom_page_callback', '', 101); 
	for ( $i = 0; $i <= 15; $i++ )
		add_submenu_page( 'custompage', 'My Custom Submenu Page ' . $i, 'My Custom Submenu Page ' . $i, 'manage_options', 'my-custom-submenu-page-' . $i, 'custom_page_callback' ); 	
}

function custom_page_callback() {
	echo '<h3>My Custom Page</h3>';

}

basic fix: if has class wp-menu-open don't modify CSS on hover

screenshot of the issue

you must use a different function for every add_submenu_page

can't replicate in chrome, maybe your browser version is old?

Replying to alexvorn2:

can't replicate in chrome, maybe your browser version is old?

Double checked. Found it in Chrome 21.0.1180.89, Safari 6, however it doesn't show up in FireFox 15.0.1

Confirmed, but applying the patch prevents showing the submenu when the menu is folded.

In [21787]:

Don't try to show the submenu when it's visible (Chrome), part props ericlewis, fixes #21832