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;
color:#0000;
}


The finished CSS3 menu is below



Working example

• TWITTER
• FACEBOOK
• BLOGGER

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