Horzintal Inline Drop Down Menu - so close yet so far

I am trying to work on the layout of the sub menu / horizontal dropdown menu on the site below (hover over programs on the page below as an example). Its so close, yet... If I set the width of .sub-menu , it works and does not wrap, which is what i want. but then the dropdowns with 2 items only are 980 pixels wide!

I cant figure out where the width of the green box is comming from... please help if you can. I think it is a quick oversight somewhere?

development site:


Pure CSS Drop down menu’s 3rd tier: to match the width of its widest sibling.


I wonder why the width of the 3rd list in my drop down menu does not have the width of its longest text length. I have removed the width completely so that by default, the width of the list can match its longest text length.

Does anyone know how to fix this??

This is the html,

<div id="footer">
		<li><a href="#" class="current-menu-footer">Home</a>
				<li><a href="#">List 2.1</a></li>
				<li><a href="#">List 2.2</a></li>
				<li><a href="#">List 2.3</a></li>

auto-width block element

Hi all,
is it possible (and if so than how)to create a block element with changing width (according to the text it contains?)
also, considering it is possible, is it possible to asign a minimum width to that block? (if the text it contains if larger than its width, it will expand)


Syndicate content