Sub Menu items display inline

[Eddie May]

Hi,
I’d like to have sub menu items display inline rather than as block level elements.

I can change the color of these items like so:
.current-menu-parent ul.sub-menu li a, .current-menu-item ul.sub-menu li a {
background-color: transparent;
display:inline;
}

However, attempts to make these display inline fail:

I’ve also tried the following:
li.menu-item ul.sub-menu li.menu-item{display:inline;}

Are the styles for these elements set by javascript?

Thanks,
Eddie

[Bill Robbins]

Eddie,

Great question. The styles are not applied via javascript, but unfortunately it’s a result of pretty big section of CSS that generates the menu. If you look in the style.css file, this section:

/* @group Superfish Drop Downs--do not edit */

.menu, .menu * 			{ margin: 0; padding: 0; list-style: none; }
.menu 					{ line-height:	1.0; }
.menu ul 				{ position: absolute; top: -999em; width: 10em; }
.menu ul li 			{ width: 100%; }
.menu li:hover 			{ visibility: inherit;  }
.menu li 				{ float: left; position: relative; }
.menu a 				{ display: block; position: relative; }
.menu li:hover ul,
.menu li.sfHover ul 	{ top: 2.5em; z-index: 99; }
ul.menu li:hover li ul,
ul.menu li.sfHover li ul{ top: -999em;}
.menu li:hover ul,
.menu li.sfHover ul 	{ left: 30px; top: 10px; z-index: 99; }
.menu a.sf-with-ul 		{ padding-right: 2.25em; min-width: 1px; }

/* @end */

aside.sidebar nav ul { 
	position: relative;
	margin-bottom: 20px;
}

aside.sidebar nav li {
	float: none;
	line-height: 2;
	font-size: 17px;
	margin-bottom: 7px;
	padding-left: 0;
	text-transform: uppercase;
}

aside.sidebar nav a, 
aside.sidebar nav a:visited {
	color: #fff;
	padding-left: 12px;
	padding-right: 12px;
	line-height: 2.2;  
	background-color: transparent;
	background-color: rgba(0, 0, 0, 0.84);
}

aside.sidebar nav a:hover {
	background-color: #971012;
}

aside.sidebar nav .current-menu-item a {
	background-color: #971012;
	left: -24px;
}

aside.sidebar nav li li a, 
aside.sidebar nav li li a:visited {
	color: #fff;
	line-height: 2.2;
	font-size: 14px;
	float: none;
}

aside.sidebar nav li ul  {
	width: 160px;
	margin-bottom: 20px;
}

aside.sidebar nav li li:hover ul,
aside.sidebar nav li li.sfHover ul {
	width: 160px;
	left:  30px;
	top: 0;
	margin-top: 10px;
}

.current-menu-parent ul.sub-menu li a, 
.current-menu-item ul.sub-menu li a {
	left: 0;  
	background-color: transparent;
	background-color: rgba(0, 0, 0, 0.84);
}

.current-menu-parent ul.sub-menu li a:hover, 
.current-menu-item ul.sub-menu li a:hover, 
ul.sub-menu li.current-menu-item a {
	background-color: #971012;
}

controls the menu. It works with a jQuery script called Superfish. I’m using a variation of their vertical menu to generate the effect that’s there. You could replace the entire menu section with their vertical menu. You’d need to apply the backgrounds and such back, but you could use it to make a vertical menu. The items wouldn’t fly out horizontally beyond the first element, then they drop vertically again. It’s made that way so you can have more menu levels on the screen.

It may be possible to have the second level fly out horizontally in a straight line, but it probably will take a good bit of tweaking. You also may want to switch to a different menu script that’s made to support that specifically.

If I can help, let me know,
Bill

[Eddie May]

Hi Bill,
Thanks for the prompt reply – much appreciated.

Before I start hacking away, I have another, related, issue. On mobile the sub menu items are not visible at all (see http://www.carterdesign.co.uk/site/). Is this default behaviour?

Thanks,
Eddie

[Eddie May]

Hi Bill,
Forget this one – just noticed the “Mobile Menu” setting! All fixed now.
Regards,
Eddie

[Eddie May]

Hi Bill,
The fix was easier than anticipated. In the custom styles I added the following;

/** sub menu items inline */
.menu li:hover ul, .menu li.sfHover ul{left:15px}
aside.sidebar nav li ul{float:left; margin:0; padding:0; width: 200px;}
aside.sidebar nav li li a{
display: inline;
float: left;
font-size: 12px;
margin: 0 3px 10px 0;
padding: 0;
}
Some of the stuff maybe redundant but I’ve not had time to optimise.

Thanks again,
Eddie

[Bill Robbins]

Thanks Eddie for sharing your menu solution!

[raymondcal]

Excuse me… I may be blind, but… where is this “Mobile Menu” setting ?

[Eddie May]

Hi Raymondcal,
Go to Appearance/Menus – you should then be able to see the tabs Main | Mobile on the right side & on the left under “Theme Locations”

Cheers,

[Eddie May]

Hi Bill,
Seems I spoke too soon about fixing the inline sub menu!

All is fine on Firefox/Chrome/Safari, etc, etc but not IE8 on XP. On IE there’s a huge gap on the sub menu items & they are displayed as block level items (rather than inline)

http://www.carterdesign.co.uk/site

Any suggestions?

Thanks,
Eddie

ps I’m hacking away at it now so ymmv

[Eddie May]

Hi,
I managed to sort this out by styling the actual li items for IE. Not ideal but it works:

li#menu-item-126{font-size:10px;max-width:32%;padding:0;margin:0;text-align:left;margin-left:-9px}

etc, etc.

Cheers,
Eddie

[Bill Robbins]

Eddie,

I’m glad you worked out a solution. I spent most of yesterday attempting to fix an IE 8 bug myself. I really like what you’ve done with the site. Good work!

Bill

[Author]

Posts