[info110]

Is there a way to make one of the main menu items a drop down and link to other pages?

[Theme Horse Support Team]

Hi info110,

Yes you can do it. Goto dashboard -> appearance -> menus -> and use custom link instead of using page/ post to link anywhere you like.

Thank you!

[info110]

OK, so I added custom links and know when I hover over the menu item that I added them to, the drop down menu appears with the custom link in it. However when I move my mouse down to click on one of the links, they drop down menu disappear before my mouse can reach it and click one. It acts as if the drop down menu needs to open a little higher on the page, so that my mouse can reach it before they disappear. Follow?

[info110]

In other words, I have to move my mouse beyond the point that I am no longer hovering the menu item that causes the drop down menu to appear. So the drop down disappears before I can reach it with my mouse.

I assume I need to reduce the spacing above the drop down menu to bring it up higher on the page, so I don’t have this problem.

[info110]

I figured out how to fix it.

[Theme Horse Support Team]

That’s great info

Thank you!

[karen2]

I’m having the same problem with the drop down menu disappearing before I can select a sub-menu page. This only happened after I did the recent upgrade; it worked fine until then. I can’t figure out how to fix it. I’ve only got very basic html coding skills; so, specific instructions on steps to take would be enormously appreciated. Thanks!

[Theme Horse Support Team]

Hi karen2,

Can you provide you site link? So that we can help you.

Thank you!

[karen2]

Hi,

it’s http://dropitanddrive.com/

Thanks!

/Karen

[Theme Horse Support Team]

@karen2

Go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save button:

#access ul li ul {
    top: 90px;
}

Thank you!

[karen2]

Hi,

thank you for the code; I’m not not clear on where exactly to put it within the CSS. This is what I have showing now:

/* =Menu
-------------------------------------------------------------- */
#access {
	float: right;
}
#access li {
	float: left;
	position: relative;
	margin: 0 0 0 20px;
}
#access a {
	color: #435464;
	display: block;
	float: left;
	font-size: 16px;
	text-transform: uppercase;
	padding: 40px 0 0;
	height: 50px;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
	color: #0ea6b5;
}

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
	display: none;
	z-index: 9999;
}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
	display: block;
}
#access ul li ul {
	position: absolute;
	background-color: #fff;
	border-top: 4px solid #0ea6b5;
	top: 100px;
	left: 0;
	width: 190px;
	-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#access ul li ul li {
	float: none;
	margin: 0;
}
#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
	float: none;
	line-height: 20px;
	font-size: 13px;
	font-weight: normal;
	height: 100%;
	padding: 6px 10px;
	color: #777;
	text-transform: capitalize;
}
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
	background-color: #F9F9F9;
	color: #0ea6b5;
}
#access ul li ul li ul {
	left: 190px;
	top: 0;
	border: 0 none;
	-webkit-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
	box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
}

Thanks in advance, again.

[Theme Horse Support Team]

Hi Karen2,

Do not paste it directly in the style.css (theme main CSS file)
Login to WordPress admin site and Go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS and paste the CSS code there and click on save button. So that your code will not be lost if you update the theme in future.

Thank you!

[karen2]

Hi again,

THANK YOU so much for the step-by-step instructions. It worked!!

Appreciate your time.

Cheers,
Karen

[Theme Horse Support Team]

That’s great Karen

Thank you

[Author]

Posts