SuzyUK - 11:46 am on Feb 24, 2011 (gmt 0)

it should just fit it in with structure you already have..

but you will need to do a bit of the work, like make those CSS rules more specific to match your existing selectors, or they likely won't work.. this is easy just follow the waterfall/cascade pattern of your existing code

so if this is already in your #sitenav menu, it may be that you need to look for the rules which are affecting the links.. it might look like this, can't remember your whole cascade!

#sitenav ul li a {} : and make sure position: relative is on it.. it might be that it's already already there, if so you don't need to add it again.. you'll know soon enough anyway as the absolute position of the span or image will take the colored box/image up to the top left of the page or container if it's not..

then follow the cascading selector pattern, take the next two rules, and prefix them with the same pattern, in the case above the specificity prefixing the <a> is #sitenav ul li.. this should keep the specificity of the rules the same - and is what is meant by the cascade!

[prefix] a span {}
[prefix] a:hover span {display: block;}

-------------------

if this does only apply to a specific part of you menu . i.e. one of the dropdowns you might want to add an ID to the overall list e.g. <ul id="thelistID">.. like we did for the "team" part.. however, from memory, I don't think this should affect anything else, even without extra ID's as you have no other spans in links doing anything.. so try it without any extra ID's first but do make sure the CSS is specific as described above

if an ID is used, the CSS would be made more specific by adding a <ul> ID into the selector.. e.g. remember the selctors are read from right to left

#sitenav #thelistID li a span {}

so descending element tree is: div, ul, li, a, span

the more parts <elements> of the descending HTML tree (DOM) you use in a CSS selector the more specific it becomes, everytime you use an ID you make it like the ultimate selector, an ID should only be used once per page, so while, div ul li a {} might target hundreds of <a>'s on the page, as soon as you start entering ID's you start to narrow down which <a>'s can be affected quite dramatically.. the #sitenav one limits it to just the links inside the #sitenav div, if you need to narrow it even further a <ul> ID does it! though like I said the <span> in your code might do it all on it's own if every span in the #sitenav div is to be treated the same!
---------------------------------

You will get the ahah moment eventually, as you keep trying you will see that the CSS methods are usually always the same, it's just that the elements themselves may differ depending on the tool for the job :)