Horizontal menus with submenus of full width CSS jfiddle included - html

Question

I'm looking to make a horizontal drop down menu much like the main menu from HowStuffWorks: http://home.howstuffworks.com/community-living
Notice how the submenu covers the full width of the horizontal main menu bar, rather than dropping down in vertical lists. And how the currently selected main menu item and sub menu items are highlighted. I would like those features, with the added bonus of showing the other sub menu lists when hovering over the other main menu items, please look at examples below:
Basically I want to combine the effect of showing different submenu lists as you hover over the links as in this one:
http://jsfiddle.net/SKNYC/
And also having the currently selected menu highlighted in a different colour, as in this one:
http://jsfiddle.net/pRT6S/
.full-width {
width: 100%;
}
.normal-width {
width: 1024px;
margin: 0 auto 0 auto;
}
.main-menu > li {
float:left;
list-style-type:none;
padding-right:30px;
}
.sub-menu {
display:none;
}
.sub-menu li {
float:left;
padding-right:30px;
}
.sub-menu li:hover ul {
float:left;
padding-right:30px;
background-color:green;
}
.main-menu li.active {
background-color:blue;
}
.main-menu > li.active .sub-menu {
display:block;
position:absolute;
left:0;
right:0;
background-color:blue;
}
Note that I'm very new to CSS/HTML, it would be nice to get some direction as to how to proceed. :)
The first jfiddle is modified from this code:
https://gist.github.com/jgoyon/3993263
The second and third jfiddle comes from someone's code in this thread:
CSS full-page-width horizontal menu and horizontal submenu
EDIT:
Another code that I spotted that is very similar to my solution is this one:
http://jsfiddle.net/U65eT/
but I'm not sure why when the hover over item1 and item2 doesn't work?
EDIT:
Current revision
http://jsfiddle.net/pRT6S/4/
It is almost correct, just has the problem of not showing the submenu when hovering over item1

Answer 1

How's this? Check the comments I made.
http://jsfiddle.net/pRT6S/3/
The main problem was needing to modify .main-menu, not .sub-menu, as seen below:
/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
display: block;
/* float:left; */
position: absolute; /* better than float in this case */
padding-right:30px;
background-color:green;
left: 0; /* make sure everything hangs on the left */
}
Update: You can use the code you originally provided (that I wrongfully commented out), but modify it a bit my adding absolute positioning and z-indexes:
http://jsfiddle.net/pRT6S/5/