The A Tag Content Goes To A New Line

This is a Jsfiddle http://jsfiddle.net/67QR8/ I have a ul class main_menu and in one of its li, I have a ul class sub_menu the a tag in the main_menu expand to fit the a content, b

Solution 1:

First, solution to the problem is to add the below setting to the CSS. As mentioned in my earlier comment, this instructs the browser not to wrap around by default.

.headerul.sub_menulia{ 
    white-space: nowrap;
}

Note: It is not required to be added to ul.main_menu li a because it would then apply to all anchor tags that are present within an li under the main_menu including the main menu's items (and since we are not using > it would apply to the sub menu's li a which are not direct children of main_menu also).

Coming to the question on why the a tag within the sub_menu is getting wrapped around while the one in main_menu doesn't, it is because of the submenu's li tag being the child of an absolutely positioned element. Check out this thread for a beautiful explanation on the topic.

Extract: The element gets its width and height before it gets removed from the flow of the document. When you position the outside element absolutely, it gets removed from the flow and since it has no immediate content, it has a width of 0 and height of 0. Therefore, another division element inside it attempting to add text inherits the parent's width of 0. So it's only going to expand to the width of the longest word to allow for content, and then break everything else to new lines. After it's done that, it removes the element from the flow of the document to be off on its own.

In the code relating to this question, here the element took the width of "Functions" or "Locations" as the maximum width (both almost same width) and got wrapped around.