inherit properties and then change some on particular site (css)

I have three menus on this test web site. I am learning css and trying menu2 & menu3 to inherit all properties from menu class. The second one looks bit different and is not clickable. I am happy with the 3rd one,开发者_如何学C just want to make it horizontal and change its position bit.

Could somebody tell me

• why the second menu is not click-able?
• how I can make the third menu vertical? I thought that display: block; for li of the 3rd menu would do the trick but I do not know the css path for that li.

Your second menu isn't clickable because your third menu box is covering it, it's box even though you can't see it is the same size as the area covered by the double horizontal lines.

The third menu isn't vertical because the lis have float:left

Use the following css to correct

.menu3 li
{
float:none;
}
.menu3
{
position:absolute;
}

You will need to set the left/top options for the .menu3 to position it on the page where you want.

If you use firefox firebug you should install the web developer and firebug extensions. If you use safari you can enable the developer tools, if you use internet explorer 8 then you can also enable developer tools. (Firebug is the best in my opinion).

The second menu is not clickable because the third menu is covering it. One way to fix that is to remove position: relative from .menu.

The path for the <li>'s in the third menu is for example .menu3 li, but I am not really sure what you mean by making it vertical. I hope you can find out a way with this piece of information.

A little hint... A tool like FireBug for Firefox is of good help for CSS trial n erroring.