Here’s how you can edit the header menu so the menu hover looks like a block.

 

The first time I started to write this post.. (or rather, added the CSS to the draft so I could finish writing the post later) was about 4 months ago.

Then, I saw someone ask this question:

Divi Tip - Header Menu Item Blocks

(not much reason to hide names, but just in case)

So here we go.

 

Take this CSS and add it to Theme Options > Custom CSS

.et_header_style_left #et-top-navigation, 
.et_header_style_split #et-top-navigation {
	padding-top: 0px;
} 
#top-menu li {
	padding-right: 0px;
}
.et_header_style_left #et-top-navigation nav>ul>li>a, 
.et_header_style_split #et-top-navigation nav>ul>li>a {
	padding: 33px 12px;
	/* margin: 0px -2px; */
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.et_header_style_left #et-top-navigation nav>ul>li>a:hover, 
.et_header_style_split #et-top-navigation nav>ul>li>a:hover {
	background: #d00;
	color: #fff;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#et_top_search {
	margin-top: 33px;
}

Note: If the slight gap bothers you, take the margin part out of the comments. (the /* */ parts)

Anyways, it should look something like this:

Divi Tip - Header Menu Item Blocks

 

And now Divi looks like this:

 

Divi Tip - Header Menu Item Blocks

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

Photo by moren hsu on Unsplash