Paul_o_b - 2:58 pm on Jun 22, 2013 (gmt 0)
Your border is on #menu which is the parent of the list items and as mentioned already your lists items are floated and therefore removed from the flow so the parents height is zero and the parent's border will not encompass the child floats.
You could as already mentioned us display:inline-block on #menu which will create a new block formatting context and as such will automatically contain child floats and solve your problem. However inline-block leaves white space gaps (and needs a hack for ie7 and under) and therefore if you don't need visible overflow it's eaasier to just add overflow:hidden to #menu instead.
Overflow other than visible also creates a new block formatting context and elements in this context automatically enclose (contain) their child floats.
If you need visible overflow then use the "clearfix" method of clearing floats (just google it) and that will solve the problem also. :)