[TwentyEleven] Styling a duplicate Primary Nav in the footer

I’ve been trying to use my css magic and float them

Post here that which you have been trying.

#nav_menu-3 {
	}
#nav_menu-3 ul{
	list-style:none;
	float:left;
	max-width:250px;
	padding-left:0;
	}
#nav_menu-3 ul li{
	font-size:18px;
	text-transform:uppercase;
	font-family:Georgia, "Times New Roman", Times, serif;
	}
#nav_menu-3 ul li ul li{
	font-size:14px;
	text-transform:none;
	font-family:Arial, Helvetica, sans-serif;
	}

What do you want floated left.. Do you have multiple <ul> elements?

I’m trying to get the lists to show in 2-3 columns, I was trying to float them.

This is how it’s displaying now:

Item 1
    -sub item
    -sub item
Item 2
    -sub item
    -sub item
Item 3
    -sub item
    -sub item

This is what I’m going for:

Item 1           Item 2           Item 3
  -sub item        -sub item        -sub item
  -sub item        -sub item        -sub item

Some of the sub items have subs too.

Are Item 1,2 and 3 different <ul> elements?

They are the same UL. Not sure if it makes any difference, but there’s actually 6 of them.

Apply float: left; to children <li> elements of that <ul>, then apply float: none; to the grandchildren <li> elements.

Thanks Andrew, but it’s not working.

Here’s the code I tried to use:

#nav_menu-3 ul{
	list-style:none;
	padding-left:0;
	max-width:250px;
	float:left;
	}
#nav_menu-3 ul li{
	font-size:18px;
	text-transform:uppercase;
	font-family:Georgia, "Times New Roman", Times, serif;
	float:left;
	}
#nav_menu-3 ul li ul{
	float:none;
	}
#nav_menu-3 ul li ul li{
	font-size:14px;
	text-transform:none;
	font-family:Arial, Helvetica, sans-serif;
	float:none;
	}

Does there need to be a max-height set somewhere? I assume that they are all floating left but there’s not set height to their container. I tried setting one but it’s not working.

If you apply border: 10px solid red; to one of selectors, does the border appear on the webpage?

Tried it here:

#nav_menu-3 ul{
	list-style:none;
	padding-left:0;
	max-width:250px;
	float:left;
	border:10px solid #333;
	}

Shows up on the page.

Can you provide a link to the problem, or PasteBin of your HTML for that menu?

Here’s an example of what I’m trying to do:

https://jsfiddle.net/4GMp7/1/

Trying to make the main bullets uppercase too, don’t think I’m selecting them properly.

First remove the float left you’ve applied to the <ul>, as we’ve established you don’t need that.

Your <li> CSS selectors are wrong. Remember, the id #menu-main-navigation-1 is within the <ul>.

I just updated it, feel like I’m getting closer.

**EDIT – left out first part of my sentence.

May you repost a link to your updated JsFiddle page?