Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css : dropdown menu with arrow effect

css : dropdown menu with arrow effect

Problem

how to create drop-down Menu with arrow effect which work in ie8 as well.

what i did i cut the arrow image and wrote the following css code. it works perfectly for firefox and chrome while not working for ie8 is there any solution to create such menu that works in ie8 as well.?

 .main-navigation li ul:before {
background: url("images/arow.png") no-repeat scroll left center / 100% auto transparent;
content: "";
display: block;
height: 22px;
left: -6px;
position: absolute;
top: -20px;
width: 222px;
z-index: 1;
 }

.main-navigation li ul {
background-color: #000000;border-color: -moz-use-text-color #494949 #494949;
border-radius: 0 0 5px 5px; border-style: none solid solid; border-width: 0 1px 1px;
box-shadow: 0 0 9px 1px rgba(0, 0, 1, 0.75); padding-top: 10px;  width: 212px; }

Problem courtesy of: Jack Torris

Solution

Try this out (pure CSS)

Here is the Demo

And this is the Source

Works in IE8

Solution courtesy of: CarnVanBeck

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css : dropdown menu with arrow effect

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×