Alright, let's break it down for you. We'll start in the markup.
I always write in XHTML 1.0 Strict -- it is one of the two recommendation doctypes (the other being HTML 4.01) and even if I 'have' to use HTML 5, I write as 4 Strict first and swap the doctype at the last minute. I use XHTML because I find the more consistent structural rules to be cleaner, and STRICT because it means the validator will throw errors if I try to use markup that has no business on websites any time after 1997.
You'll notice I have a veiwport meta -- those are the values for viewport you should set if you plan on designing for mobile; it tells mobile browsers not to lie about the device resolution, or to start out with some arbitrary zoom. Some people throw other 'scale' values in there, and I've no clue why since they break zooming on mobile!
Notice my stylesheet LINK has a MEDIA target. "screen" is obvious, that's most devices. "projection" is used by some kiosks and browsers when running in full screen mode, so we want that, and a handful of devices either still report themselves as TV, or override your stylesheet with their own values if you don't say TV -- so as a rule of thumb, say all three for your "screen" target. I also call the stylesheet "screen" so I know WHICH stylesheet it is, instead of the uselessly vague nonsense some people use like "layout.css" or "style.css".
I also put <html><head>, </head><body> and </body></html> on single lines for a reason - most people think it's to save a character, but that's not it. I do so as a reminder that NOTHING other than whitespace should EVER go between those elements. People insert crap between those tags WAY too often, putting them together as a single line reduces the odds of the copypasta crowd screwing things up.
The core of it isn't too complex. Nested lists, DIV for grouping child elements, span for grouping inside the DIV... Pretty simple. The only real thing that needs explaining is that .alternate means the menu item is past the middle of the menu, so dropdowns should be positioned off the right edge, not the left.
In the CSS:
http://www.cutcodedown.com/for_others/andreaBurgio/screen.css
I always start out with a "reset" -- Making sure certain values in certain tags start out the same.
There are smaller resets like the so called "universal" one of "* { margin:0; padding:0; }" but that can make life hard when it comes to dealing with form elements like INPUT, SELECT and TEXTAREA, as both FF and IE have oddball paddings you have no control over and react differently to padding changes than "Rest of World" (RoW) thanks to their pre 2003 legacy.
There are also larger resets like Eric Meyer's "reset reloaded", but that one wastes a bunch of time setting values that don't start out different cross browser and you're just going to be changing anyways -- bloated resets like that one border on being a framework, and are what gives resets a bad name.
The one I use at barely a quarter of a K of code is small enough not to sweat it, and does what needs to be done, nothing more. It's the nice safe middle-ground; and sometimes that's your best bet -- truth lies somewhere in the middle.
One thing I do is hide HR. We didn't use them in this example, but they are something I use for semantics in a full design, and that's part of my starting stylesheet. Usually I want their semantic meaning, not their appearance, hence hiding them.
The first media query on the page is to send text-size-adjust just to small screens. That value also tells mobile devices that we know what we are doing, so don't override our font-size choices. I have to put it in a media query as if it's sent to OSX Safari, it breaks zooming -- a laugh as it does NOT break zooming on iOS Safari. (which is some serious herpafreakingderp on Apple's part)
So, on to the actual layout:
body I set the font-size I'm likely to use on the majority of page elements. I use % so it's automatically based on the user's preferences. If I declared any widths in the layout I'd use EM's to that end as well. Declaring font sizes in pixels is a steaming pile of /FAIL/ at web design in all but the narrowest of corner cases (like under a image-replacement) which is why designs -- like the one you're trying to copy -- are rubbish I'd tell the site owner to pitch in the trast. I think I already mentioned that said site is chock full of poor design choices that make it an accessibiltiy train wreck. NOT sure it's a design I'd be trying to emulate, even as a learning exercise.
#mainMenu -- turn off the bullets. I redeclare the line-height just in case some other parent element interferes as the menu is going to rely on that staying 1.5em aka 150%.
#mainMenu li -- I float them as it's VERY hard to get inline-block elements to 'behave' with dropdowns. The relative positioning lets us absolute position child elements based on the dimensions of this LI instead of based on the window... The zoom fixes legacy IE behavior when it comes to positioning. Finally there's an overflow:hidden, meaning anything 'outside' the flow dimensions of the LI is hidden.
#mainMenu li:hover -- when the LI is hovered, we make stuff outside the LI's flow dimensions visible. There's your dropdown. I went with a brighter background just to make it clearer what's going on.
#mainMenu a -- we can't just display:block these or IE7 will have the "staircase bug" where instead of being next to each-other they will drop down the line-height looking, well... like a staircase across the screen. Float doesn't have that problem. Pad them, strip off the underscore, color... nothing to write home about.
#mainMenu div -- the dropdown itself. Absolute positioned at the bottom left corner. That 2em is the 1.5em line-height plus the 0.25em top and bottom padding on the anchor. TRY to avoid declaring fixed heights on containers as you then cease to be 'elastic' and when things like padding gets involved you can start to have major headaches.
It's why as a rule of thumb I try to avoid declaring width or height the same time as padding and border. Lets you dodge box model headaches and is just ... simpler.
#mainMenu .alternate div -- It is VERY hard to convince browsers once you've set a 'left' value in CSS to set it back to 'auto', even if the property exists. What we WANT is right:0, but if resetting left is ignored we end up with a dropdown area the width of the parent link. Solution? If we set it "left:100%" it will slide all the way across the width of the parent. A negative margin equal to the element's width (of 26em) will then slide it back to the left exactly where we want it. We shouldn't have to do it that way, but certain browsers (FF and IE) both still have their heads up their backside on this.
#mainMenu div div - the inner DIV is for the second column preventing it from de-indenting under the floated image. IF you don't care about IE7/earlier you could use the sibling selector ">" for "#mainMenu li>div" on the previous two declarations so we don't have to override values, but I prefer to go for compatibility. As such we have to undo everything we set on "#mainMenu div" for positioning. Then it's a simple matter of adding float wrapping behavior to it.
#mainMenu div div a -- likewise the anchors inside this neeed to be set to block and have overflow behavior.
#mainMenu div div a:hover -- just some color and style. Nothing fancy.
#mainMenu div div i -- the I(talic) tag means "would be italic in professional writing", NOT that it "must be italic". When TBL made HTML many target devices couldn't even SHOW italics. A date as sub-info is a likely candidate for using this tag... even if we are showing it greyed instead of italic. People who say "shouldn't that be a EM" don't know enough about what B, I, EM or STRONG mean to be flapping their gums on the subject.
#mainMenu ul -- the inner menu gets a EM width and floated. Again, nothing too fancy.
#mainMenu li li,
#mainMenu li li a,
#mainMenu li div a -- all our nested anchors in the dropdown as well as the inner LI we need to unset the float and overflow behaviors we gave their parents. Again, if we had targeted those using the child selector of ">" we wouldn't have to do this, but legacy IE doesn't know that selector.
#mainMenu li li a -- border, yawn.
#mainMenu li li:first-child a -- no border on the first one, YAWN
#mainMenu li li a:hover -- color... STRETCH YAAAAAAWN.
#mainMenu div div img -- the innermost images are floated with some margins. Again, nothing fancy.
... and that's the full explanation.
Hope this helps.
