CSS Problem with <ul> element not expanding to size of list

I was hoping someone c开发者_JAVA百科ould help me out with a navigation bar I'm styling in CSS. I'm having trouble with the ul element, it's not expanding to the size of the list - not too sure what I'm doing wrong.

I've set up a little prototype here:

http://jsfiddle.net/JCraine/NvKzM/2/

The offending UL element is in red. I'd be so grateful if someone could take a quick look for me!

Just scroll down to header nav .submenu ul in the CSS to see what's going on

Thanks!

You are floating your listitems which causes the parent not to know how high it should be.

floating the <li> elements sometimes causes the <ul> to collapse, a simple solution is to float both the <li> and the <ul> and place the <ul> inside a container.