TOTAL newbie

[blairsp]

I'll admit right off that I am a complete newbie to CSS. In fact I have never used it, however someone has suggested it rather than the javascript drop down menu I am using at the moment. Can anyone point me in the direction of a good wesbite which will "take my hand"

[Robin_reala]

[w3schools.com ] proved useful to me...

[willybfriendly]

search G for "listamatic" and for "list-o-matic" and you should find some good stuff.

WBF

[blairsp]

many thanks to both of you.

[Uri_B]

See [meyerweb.com...] for a demo of CSS-based menus. Unfortunately, that solution does not work in IE.

[kiwibrit]

AFIK, to get drop down or flyout menus, rather than just top level menus with hover effects, that work in IE, you have to use something like javascript. But i would be happy to be told I am wrong - with a reference.

[createErrorMsg]

suggested it rather than the javascript drop down menu

CSS dropdown menus rank amongst CSS trickiest tricks. They use several of CSS's more complicated properties, carefully nested lists in the source code, and precise use of the cascade. That's not to say that you won't be able to get it done, but if you're a "TOTAL newbie," you should get a little background down before digging into trying to build a drop menu.

The W3Schools link above will be enough to get the basics of syntax, placement and basic properties down. After that, open the CSS specs [w3.org] in a browser window and leave it open to look up any properties or property values that you don't know. The specs can be hard to understand, but reading them is the only way to really get a sense for how some of this stuff works. I don't suggest trying to spend a weekend reading through the W3 specs, however. Use it as a reference when you see something unfamiliar.

Once you understand the basics of what CSS is and how it works, and you're ready to try tackling those drop down menus, run a search for "Suckerfish Dropdowns." The article is by Patrick Griffiths and Dan Webb. Read it several times, looking things up as necessary, until you start to get a sense for what they're doing. Then give it a try. The method is JS independent on non-IE browsers, and uses a small JS script to make IE mimic the :hover behavior.

(:Hover is a pseudoclass that allows you to have the browser change the properties of an element when the mouse moves over it, like javascript's onMouseOver, but without JS. Non-IE browsers support this property on any element, but IE only supports it when it is used on <a>nchors. The Suckerfish drop down menu uses it on the <li> element, so IE will not function as hoped. The JS script works around this by dynamically changing the className of the target list item. With JS disabled, the drops won't work in IE, but the top level menu items will still function as links so the site remains navigable.)

Good luck and be sure to post any specific questions here once you're into the coding stage.

cEM