css : dropdown menu with arrow effect

Question

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

Check out these links. There are multiple menu's available. Downnload the source. Read the instruction and use them http://cssmenumaker.com/css-drop-down-menu — AnaMaria, Aug 09 '13 at 06:09

score 5 · Accepted Answer · answered Aug 09 '13 at 04:40

5

Try this out (pure CSS)

Here is the Demo

And this is the Source

Works in IE8

answered Aug 09 '13 at 04:40

CarnVanBeck

194
10

chanrlc · Answer 2 · 2013-08-09T06:38:15.910

-1

also, try to add the following under head session.

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

edited Aug 09 '13 at 06:38

answered Aug 09 '13 at 04:43

chanrlc

182
1
10

If the code you write does not work in ie8, then adding this meta tag does not help. – AnaMaria Aug 09 '13 at 06:00
No, if you use this code, the style will be Compatible with the CSS even IE 10. Are you writing ASP.net application? if not , it doesn't help. – chanrlc Aug 09 '13 at 06:35
I do happen to know how Meta-tags work. IE=edge means IE should use the latest (edge) version of its rendering engine. It does not make any difference to the code or compatibility with the code. If the client is using ie6 or ie7 and if you use CSS3 then this Meta tag does not make one differnce whatsoever – AnaMaria Aug 09 '13 at 06:48
Check this amazing link to learn more about meta tags http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge – AnaMaria Aug 09 '13 at 06:48
In case of IE 6, 7 , it is another question, the CSS3 may not work properly. – chanrlc Aug 09 '13 at 06:51
Forget it. I give up. Read the question. read your answer and see if it applies. If you feel it does than im an idiot – AnaMaria Aug 09 '13 at 06:53
Some styles IE does differently, try it yourself and you have to modify some where of the CSS. – chanrlc Aug 09 '13 at 07:08

score -3 · Answer 3 · edited Aug 09 '13 at 06:03

-3

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

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

edited Aug 09 '13 at 06:03

Cody Gray - on strike

239,200
50
490
574

answered Aug 09 '13 at 04:37

Himanshu Goyal

15
5

Meta-tags? OP is asking for a CSS menu thats will work in IE8. Not for meta-tags. This meta tags does not serve the purpose – AnaMaria Aug 09 '13 at 05:58

css : dropdown menu with arrow effect

3 Answers3