This is a demonstration of different hover effects for the Divi Menu module created by Ania Romańska from Divi Lover. You can download the sample JSON layout and copy the CSS code from this article.

Please open the demo page on desktop screen to see the menu hover effect in action.

Hover Style #1

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC

Hover Style #2

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC

Hover Style #3

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC

Hover Style #4

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC

Hover Style #5

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC

Hover Style #6

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC

Hover Style #7

BottomOffset: 20px
LineHeight: 5px
LineColor: #29EECC
BottomOffset: 22px
LineHeight: 32px
LineColor: #29EECC
BottomOffset: 48px
LineHeight: 2px
LineColor: #29EECC
Super Offer