I'm not sure what kind of help you want since you provide a decent example to follow already.
You should fix the menu you've got first. I would want to consolidate that CSS and validate everything before adding more to it.
You have a bit of divitis
I think. Hard to say what's going on with .topMenu and #cssmenu later in development but one of those really doesn't add anything to the menu right now...
Validating will help find errors like your misspelling of backgroiund.
I'm not sure why you add #One:hover to each bit that puts your 4px border on the bottom of each li that's hovered?
Things like min-height: 1px;, that * in front of display, using the > to target your anchors, padding: 0 auto; ?, putting margin: 0 auto; on an element with no width, using :after to clear something that doesn't need cleared, multiple entries in your CSS for styling the same element... all these things just add to confusion later on.
Once you get all that fixed to your liking, I would just suggest editing your markup to add the dropped mega-menu by following the example you link to.
Then you'd probably want to remove the :hover 4px bottom border from the parent li.
Then your biggest task would be specificity
. You'll want to target the mega-menu ul/li's without messing up the parent menu.