Sharepoint has a nasty habbit of keep navigation flyouts on the screen for a good second before they hide. This is probably to aid accessibility where a user might not have precise mouse control. However if you’re a good designer then you should have plenty of large clickable navigation menu items and plenty of white space.
When rolling over a number of flyouts quickly, the user sees all the flyouts shown on the screen at once which looks rubbish. To remove the delay altogether use this css in your page somewhere:
li.hover-off>ul
{
display:none;
}
The way it works is when you hover over an item in the nav the built in sharepoint javascript adds a css class called “hover” and as soon as your mouse leaves the area it changes the class to “hover-off” for 1 second before removing it completely. This CSS will hide the unordered list directly below the list item that has the class “hover-off” thus hiding the flyout as soon as your mouse leaves the parent.
(P.s. this kind of flyout navigation can be set up by setting the ‘MaximumDynamicDisplayLevels’ attribute of the SharePoint:AspMenu control)
Comments