Thursday, 1 March 2012

Multi browser compatible CSS3 horizontal list menu navbar

Multi browser compatible CSS3 Menu, compatible with Firefox, Safari/Chrome, Opera and IE9.

The menu uses an un-ordered list, the list is set to display: inline and set the list-style-type: none.

Example 1

#navlist li
display: inline;
list-style-type: none;

The background gradient CSS uses webkit-gradient, moz-linear-gradient, filter for IE browsers, just background for non-CSS3 browsers and rounded corners using CSS border-radius and -moz-border-radius.

Example 2


The horizontal list link CSS was then defined and a subtle glow type effect on hover was added to the ul a:hover using the text-shadow CSS

Example 3

#navcontainer ul a:hover{
text-shadow: 0 0 10px #0000;

The finished CSS3 menu is below


Working example

Browser downloads: Apple Safari | Google Chrome | Microsoft Internet Explorer | Mozilla Firefox | Opera Software Opera

No comments:

Post a Comment