Dropdown menu too long in Twentyeleven

If you’re not familiar with HTML and CSS, you could consider a plugin that handles something similar.

Your main navigation menu links need to be taller to join with the sub menu. As you can see with the Live link, there’s a 5 pixel gap where you are no-longer interacting with the hyperlink, which disappears the submenu. Consider either expanding the height of anchor tags or moving the submenu upwards.

Hey Andrew,

Well, I decided to take the JQuery route, but I seem to have made a big error. In their instructions, you have to install your own widget in the header (as there is not one by default). I have added this code to the functions.php and then went to proceed to the header.php file but then the site crashed. Now, since there is a parsing error in the code, I cannot even login to wordpress to remove the code.

This is becoming quite frustrating… any ways to reverse what I have done without logging in?

Thanks and best regards,

William

Ignore my last post, I fixed the file by reloading the original functions.php via FTP. However, I still have the problem that JQuery only works for sidepars unless you define a widget area…

Okay William, don’t worry about the plugin.
Here’s some CSS you could try;

/* Expand the width of the submenu to allow space for 2 columns */
#access ul ul {
 width: 400px;
 /* Here's a fix for the disappearing submenu too */
 top: 30px;
}

#access li li a {
 display: block;
 /*You need to add a height, otherwise some times with larger
  * heights will push down others. It will basically look messy with
  * large gaps.
 */
 height: 20px;
}

Are you using a Child Theme or a Custom CSS/Styles plugin to implement your CSS modifications?

I copied the theme from twentyeleven and renamed it. I looked into child themes but it did not make much sense to me.

Looking at what you are doing here, there is no #access li li a – rather there is:

#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 400px;
	z-index: 99999
    top: 30px;;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #BAB5B5;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 10px;
	font-weight: strong;
	height: auto;
	line-height: 1em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #BAB5B5;
}
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;

I set to 400px and added 30px for top…But not sure for the next part. Will this end up giving me two different columns (and how?)

Thanks a lot for the continued support. Cheers!

WordPress’ philosophy on themes not custom built is to avoid modifying those themes’ files, as your modifications are likely to erase once the theme updates.

You should be using either a Child Theme, or an easier and CSS-specific CSS Manager plugin.

Code should then be created to override your theme’s files, within the Child Theme or Custom CSS Manager plugin.
You need then only copy & paste my code into either of these.

But not sure for the next part. Will this end up giving me two different columns (and how?)

I’m not sure which part you’re referring to.
Your sub menu items are already floated left, but they haven’t enough room to sit next to eachother because the submenu has a small width.
Expanding the width for the submenu to 400 pixels is just wide-enough for the submenu items to sit aside one another, in a 2-column layout.

Andrew,

I really appreciate your help but unfortunately this is not working as described. I have added the code you talked about and am witnessing no changes.

Are there other options?

Cheers,

William

Odd, there’s more styling necessary now;

• Change the #access ul ul width to 500px.
• Add overflow to the #access ul ul.
• Add a width to the <li> elements.

So your code should be this, all together;

#access ul ul {
 width: 500px;
 overflow: hidden;
 top: 30px;
}

#access ul ul li {
 width: 250px;
}

#access li li a {
 display: block;
 /*You need to add a height, otherwise some times with larger
  * heights will push down others. It will basically look messy with
  * large gaps.
 */
 height: 20px;
}

Hey Andrew.

It just does not end up working out the right way. I am going to tinker more with the JQuery stuff. I still have some problems with making my own widget area, but I need to try to figure that out…

Thanks,

William