CSS for a Beautiful Dropdown Menu

I recently received a really beautiful site to develop. The design called for this really nice dropdown menu.

I loved the look of it, but wasn’t sure how to create it. Here’s what I did:

1) In the Appearance > Menu section of WordPress, I found both pages, and gave them a custom CSS class. For the first one I used “top” and the other I used “bottom”.

Remember, if you don’t see that CSS Classes option in your menu, just click on Screen Options at the top of the screen and make sure CSS Classes is checked.

2) Second, we need to clip that little triangle off the top of the image and save it as a transparent png file. I like to store these types of images in my theme file, because they won’t be used if the client switches themes, and that way the customer won’t delete it out of the media library by accident. You’ll see it below in my code named menu-arrow.png.

3) Then, I just used the :before and :after CSS selectors to style. You’ll see I used the border-top property to create the little white line.

.genesis-nav-menu .sub-menu a {
	background-color: #065794;
	border-top: none;
	padding: 16px 20px;
	position: relative;
	width: 175px;
	color: #fff;
	font-weight: 700;
	text-align: center;
}
.genesis-nav-menu .sub-menu .top a {
	border-radius: 5px 5px 0 0;
}
.genesis-nav-menu .sub-menu .top a:before {
  content : url(/wp-content/themes/janice-lee/images/menu-arrow.png);
  position: absolute;
  left    : 0;
  top  : -11px;
  height  : 11px;
  width   : 29px;
}
.genesis-nav-menu .sub-menu .bottom a:before {
  content : "";
  position: absolute;
  left    : 25%;
  top  : 0;
  height  : 1px;
  width   : 50%; 
  border-top:1px solid #fff;
}

.genesis-nav-menu .sub-menu .bottom a {
	border-radius: 0 0 5px 5px;
}

And it comes out beautifully like this:

See it in action here: http://janiceyklee.com/