Need some help with dropdown menu behavior

Greetings. This is a basic theme I am creating which uses the bootstrap framework. I didn’t want to use the bootstrap menu and would prefer to code my own.

There is a sub menu item below the “My Portfolio” main menu item but it doesn’t appear when you hover over My Portfolio, but it does appear when you hover just below the menu.

Not sure what I am doing wrong. The menu CSS is below:

#primary-menu {
	background-color: #595959;
	margin-bottom: 18px;
}
#primary-menu .main-nav ul, #primary-menu .main-nav li {
	margin: 0;
	padding:0;
}
#primary-menu .main-nav li {
	list-style-type: none;
	display: inline-block;
	position: relative;
}
#primary-menu .main-nav li a, #primary-menu .main-nav ul ul li a {
	display: block;
	padding: 6px 12px;
	font-size: 18px;
	font-weight: 400;
	color: #fff;
}
#primary-menu .main-nav li a:hover, #primary-menu .main-nav .current-menu-item a, #primary-menu .main-nav .current_page_item a, #primary-menu .main-nav a:hover  {
	background-color: #3c8dc1;
}
#primary-menu .main-nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
}
#primary-menu .main-nav ul ul li {
	border-top: 2px solid #cacaca;
}
#primary-menu .main-nav ul li:hover > ul {
	white-space: nowrap;
	display: block;
}

The page I need help with: [log in to see the link]