CODEWITHSUNDEEP
htmlcss
Jack Torris
Jack Torris

Reputation: 804

css : dropdown menu with arrow effect

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; }

i used this image as arow

actual output needed

Upvotes: 3

Views: 6950

Answers (3)

chanrlc
chanrlc

Reputation: 182

also, try to add the following under head session.

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Upvotes: -1

Himanshu Goyal
Himanshu Goyal

Reputation: 15

Add this meta tag in between your <head> tags:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Upvotes: -3

CarnVanBeck
CarnVanBeck

Reputation: 194

Try this out (pure CSS)

Here is the Demo

And this is the Source

Works in IE8

Upvotes: 5

Related Questions