This code will add a hover effect to Divi's navigation bar. Place this code snippet in your style.css file in your child theme.

Add a hover effect to Divi's navigation bar

#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

#top-menu a::before {
    margin-right: 10px;
    color: #333333;
    font-weight: bolder;
    content: '|';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

#top-menu a::after {
    margin-left: 10px;
    content: '|';
    color: #333333;
    font-weight: bolder;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

#top-menu a::before,
#top-menu a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}