[SOLVED] Two sub menu items on same the same line

Steve700 · #1 Jan 2, 2018, 10:02 AM

I added an item to a sub-menu that is wider than the first two items. When I change the width of sub menu to make it wider, the first two items appear on one line. I would like each item to appear on separate lines. Is there a way to do this?

Thanks

juggledad · #2 Jan 2, 2018, 06:36 PM

Can you give me a link to show the issue?

Steve700 · #3 Jan 3, 2018, 09:42 AM

Currently I have the width set at 12 for you to view. If I change the width to 11 Help and About appear on the same line and Terms of Service is centered.

If I change the width to 9.5 Help and About are on separate lines and Terms of Service is centered on two lines.

If I could force each menu item to appear on a separate line, that would work regardless of the width.

Family Histories

Steve700 · #4 Jan 3, 2018, 10:13 AM

Sorry, forgot to attach the file in the first reply.

juggledad · #5 Jan 3, 2018, 03:03 PM

try adding this at the end of your CSS inserts:

HTML Code:

div#menu1 ul.sub-menu li 
 {
	float: left;
    width: 12em;
    text-align: left;
}

Steve700 · #6 Jan 3, 2018, 04:01 PM

This worked except I had to change the width in CSS inserts from 12 to 11 and then change the width of sub menus to 11.5 to get rid if some white lines that appeared on the right side. Other than that, it looks great!

I think the white lines were caused by the background being a little wider than the text boxes.

Thanks!