使用HTML和CSS的鼠标悬停导航下拉菜单

Question

I would like to ask, if there is any way to develop a mouse-over dropdown menue using CSS and HTML, because I have seen before some websites like google for example developed such menus and it seems that once you pass through it a hidden tag gonna be visible to you.

Please if any one have an idea, provide a source code of that idea

Thanks and regards

Answer 1

This is referred to a CSS hover menu. They're a great alternative to using JavaScript.

Sample implementation:

.trigger ul.menu
{
    display: none;
}
.trigger:hover ul.menu
{
    display: block;
}

Sample Tutorial: http://www.shingokko.com/blog-entry/pure-css-hover-menu.html

Contrary to other answers, this method is cross-browser compatible. If implemented correctly, it will work just fine in IE6+ (Source) .

Answer 2

I don't think I can explain it better than this: http://www.htmldog.com/articles/suckerfish/dropdowns/

That's what's known as "Son of Suckerfish Dropdowns". It should get you going on the right direction. Do be aware that CSS-only dropdowns won't work in IE 6 and older.