CSS Navigation bar background vanishes on setting float property - html

Question

So I have been building this css navigation bar, I have a few problems hope someone can help
. This is how it is Navigation bar . But on setting the float property of the ".cssmenu ul li" to left the whole green background vanishes Navigation with float enabled . Why does this happen? Also I have used the :before pseudo class to create the underline extension effect but that doesn't seem to stretch to the whole width even I have set the width : 100% on hover.
Thanks in advance.
since "Links to jsfiddle.net must be accompanied by code "
.cssmenu{
width : auto;
background : #27ae60;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: block;
padding: 0;
}
things mess up on enabling the float property in .cssmenu ul li .

Answer 1

Parent elements of floated elements do not expand to their children's size. Think of this like the children were position: absolute.
To force the parent element to encompass all of its floated children, add overflow: hidden to the parent. In your case, you would add this to .cssmenu:
.cssmenu {
overflow: hidden;
}
JSFiddle
As for the underlining, setting the width of the :before element to 100% makes the underline the same width as the a element. This is the width of the text.
Instead, you should add the :before element to the li element:
.cssmenu ul li:before {
...
}
.cssmenu ul li:hover:before {
...
}
Now 100% width means the width of the li element, which is the "full" width of a menu item.
Note: You'll also have to change some metrics of the :before element such as top, left, etc.
JSFiddle

Answer 2

Use
.cssmenu {
overflow: hidden;
}
Demo here

Answer 3

Are you trying to inline the navigation elements? Wondering what you're trying to accomplish, that may help us better answer your question. I'm a little unclear, but here goes nothing!
Here's my shot:
http://jsfiddle.net/jasonbelmonti/CYR7V/
Is this what you're looking to achieve?
This is the css I used:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssmenu{
width : auto;
background : #27ae60;
overflow: hidden;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: inline-block;
width: 33%;
padding-top: 15px;
padding-bottom: 17px;
}
.cssmenu ul li a{
display : block;
position : relative;
font-family: "Open Sans";
color : #fff;
text-decoration: none;
padding : 0 px;
text-transform: uppercase;
transition : all .3s;
font-size :14px;
}
.cssmenu ul li a span
{
padding-left: 15px;
}
.cssmenu ul li a:before{
content : ' ';
display : block;
height :3px;
width : 0px;
background : #2c3e50;
position : relative;
top : 30px;
left : -25px;
transition : all .3s;
}
.cssmenu ul li a:hover:before{
width : 100%;
left: 0;
}
.cssmenu ul li a:hover{
color : #34495e;
}