WebAppers

/ best free open source web resources /

Shopify

Mac-like Multi-level Dropdown Menu with CSS3

Posted · Category: License Free, Menu

WebDesignerWall has shared the way he made the Mac-like multi-level dropdown menu using border-radius, box-shadow, and text-shadow. It is called CSS3 Dropdown Menu, which renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

There is one gradient image is used. A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.

css3-dropdown-menu

Requirements: -
Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/
License: License Free

2 Comments
  • Pingback: appleみたいなドロップダウンメニュー【CSS3】 | KRUZ-GRAPHIX

  • http://pariblog.ro Pariuri Sportive

    Your none image version isn’t working to display the sub level navigation (hover over N.Design Studio, the flyout is hidden) in IE7. The image one is working in IE7 to display this. I’ve compared your css and other than the image, there isn’t any difference (that I saw). Any chance you know what it is? I’d like to use this, but IE7 is still a widely used browser so I’d like it to render properly there as well. Any help would be greatly appreciated.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons