CSS Hover Effect with Flyout Menu

Posted in Tutorials

Continuing from the last tutorial, we now create a CSS hover effect so that a flyout menu appears when menu item is hovered over as demo here.  It looks like this …

We will add the flyout menu to the second menu item as shown …

We just added another “ul” element within the existing li element right after the “a” link element.

We now have unstyled flyout menu looking like …

We need to add the following to our style sheet (style.css in the same folder as our index.html) …

Our flyout menu ul is nested within our li.  We created a rule for that and position our nested ul as “absolute”.  In order for position absolute to work, the li that is containing it should be set position relative as we done above.   We you position the ul as absolute, set it top and left properties to tell it how to position.

This is how it looks now when positioned …

We just need to remove the bullets, give the flyout ul a width and border, and remove margin/padding …

The flyout menu looks good, but stuck positioned in place as fixed…

The css hover effect on the flyout menu itself already works from the previous code.

But we need to apply CSS to not display this flyout menu. And to display it only when the primary menu items are hovered over …

The display none on the nested ul will hide.  And the display block on the li:hover will show.

 

 

---