Dropdown activation area

I’m having a problem with my dropdown menu being activated outside of the navigation bar. The dropdown is activated from anywhere inside the area where it appears, causing it to interfere with page content.

This is my site: http://www.ohstenmarketing.com/. You can see this happening when you hover beneath the “Services” item.

Are there some CSS modifications I can make so that the dropdown activation is kept to the parent menu item?

Thanks very much.

Hi Jannike,

Seems like all is good in our end? The navigation shows nicely when on mouse hover http://prntscr.com/77y8tw

Let us know if you still need any help.

Best Regards,
Awan

Thanks for your answer, Awan, but I’m not sure I explained my problem well enough the first time.

On athemes.com, if you come at the ‘Home’ menu item from below, the drop down isn’t activated until you actually reach the item, right? On my website, if you move your mouse towards the ‘Services’ item from below, the drop down is activated well before you reach the menu item. This means that if I place any links etc on a page immediately beneath that menu item, the user experience will be confused by the drop down being activated unintentionally. Please go the my home page and mouse over the ‘Content marketing’ icon, and you’ll see what I mean.

I hope this makes more sense. Thanks!

Hi Jannike,

I understand now what you mean :smiley:
Ok, this is what you need to change:
you have to open the style.css that belong to your theme-child directory and change this line:

.main-nav ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position:absolute;
	background-color:#87bcac;
    margin:0px;
	width:200px;
	opacity: 0;
	z-index:99;
	
}

to:

.main-nav ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position:absolute;
	background-color:#87bcac;
    margin:0px;
	width:200px;
	display:none;
	z-index:99;
	
}

and change this also:

.main-nav ul li:hover > ul {
	opacity: 1;
}

to:

.main-nav ul li:hover > ul {
	display: block;
}

It worked :slight_smile: Thank you so much for your help!