CSS菜单在IE8中不起作用

Question

I know this has been asked many times, but I cannot seem to get anything to work.

My CSS Drop down seems to work in every browser except IE8 ...

I've tried added fiddling with it and I cannot get it to work

The main index.html shows the menu just fine, soon as you click a link it sends you to the page and displays inline no css styling.

http://www.qsoftsolutions.com/index.html

heres the code css and html

 #menu_wrap { position:relative; z-index:2; text-align:center; width:100%; padding: 0px 0px; } #menu { position:relative; z-index:2; width:1000px; text-align:center; margin:0 auto; height:61px; padding: 0px 0px; } nav > ul {margin: 0} nav ul ul { display: none; nav ul li:hover > ul { display: block; } nav ul { background: #bbb38f; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */ background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */ box-shadow: 0px 0px 9px rgba(0,0,0,0.5); padding: 0px 2px; list-style:none; position: relative; display:inline-table; text-decoration:none; font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif; font-size:17px; color:#FFFFFF; font-weight:light; outline:none; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #736e57; background: linear-gradient(top, #BBB38F 0%, #6B6441 40%); background: -moz-linear-gradient(top, #BBB38F4 0%, #6B64415 40%); background: -webkit-linear-gradient(top, #BBB38F 0%,#6B6441 40%); text-decoration:none; font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif; font-size:17px; color:#FFFFFF; font-weight:light; outline:none; } nav ul li:hover a { color:#FFFFFF; } nav ul li a { color:#FFFFFF; display: block; padding: 12px 42px; text-decoration:none; } nav ul li:hover > ul { background: #303030; text-decoration:none; display: block; } nav ul ul { background: #303030; font-family: WalkwayBlack, Copperplate Gothic Light, Arial, sans-serif; letter-spacing: 0.06em; font-size:14px; text-decoration:none; color:#000; font-weight:light; outline:none; filter:alpha(opacity=95); opacity: 0.95; -moz-opacity:0.95; } nav ul ul li { text-decoration:none; float: none; position: relative; } nav ul ul li a { text-decoration:none; padding: 0px 0px; color:#000; } nav ul ul li a:hover { text-decoration:none; background: #736e57; } nav ul ul { text-decoration:none; padding: 0px; position: absolute; } nav ul ul li { width:200px; float: none; position: relative; } nav ul ul li a { padding: 10px 0 10px 5px; color:#000; font-family: WalkwayBlack, Copperplate Gothic Light, Arial, sans-serif; font-size:14px; letter-spacing: 0.06em; text-align: left; } nav ul ul li a:hover { font-family: WalkwayBlack, Copperplate Gothic Light, Arial, sans-serif; font-size:14px; letter-spacing: 0.06em; text-align: left; background: rgb(187,179,143); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iI2FlYWY5NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2E4YTQ5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(187,179,143,1) 0%, rgba(174,175,151,1) 38%, rgba(168,164,149,1) 62%, rgba(107,100,65,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,179,143,1)), color-stop(38%,rgba(174,175,151,1)), color-stop(62%,rgba(168,164,149,1)), color-stop(100%,rgba(107,100,65,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(187,179,143,1) 0%,rgba(174,175,151,1) 38%,rgba(168,164,149,1) 62%,rgba(107,100,65,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(187,179,143,1) 0%,rgba(174,175,151,1) 38%,rgba(168,164,149,1) 62%,rgba(107,100,65,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(187,179,143,1) 0%,rgba(174,175,151,1) 38%,rgba(168,164,149,1) 62%,rgba(107,100,65,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(187,179,143,1) 0%,rgba(174,175,151,1) 38%,rgba(168,164,149,1) 62%,rgba(107,100,65,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */ color:#000; } nav ul ul ul { position: absolute; left: 100%; top:0; } 

 <!-- START MENU NAV BAR CODE --> <div id="menu_wrap"> <div id="menu"> <nav> <ul> <li><a href="Company/company.html">Company</a> <ul> <li><a href="Company/mission.html"><span><img src="Icons/mission.png" alt="mission" />&nbsp;Mission</span></a></li> <li><a href="Company/philosophy.html"><span><img src="Icons/philosophy.png" alt="Philosophy" />&nbsp;Philosophy</span></a></li> </ul> </li> <li><a href="Solutions/solutions.html">Solutions</a> <ul> <li><a href="Solutions/QPipe-Estimator/qpipe-estimator.html"><span><img src="Icons/qpipe.png" alt="qpipe" />&nbsp;Q Pipe Estimator &nbsp;&nbsp;&nbsp;&nbsp; <img src="Icons/arrow-small.png" alt="qpipe" /></span></a> <ul> <li><a href="Solutions/QPipe-Estimator/advantage.html"><span><img src="Icons/advantage.png" alt="Advantage" />&nbsp;Advantage</span></a></li> <li><a href="Solutions/QPipe-Estimator/differentiator.html"><span><img src="Icons/differentiator.png" alt="Differentiator" />&nbsp;Differentiator</span></a></li> <li><a href="Solutions/QPipe-Estimator/features.html"><span><img src="Icons/features.png" alt="Features" />&nbsp;Features</span></a></li> <li><a href="Solutions/QPipe-Estimator/screenshots.html"><span><img src="Icons/screenshots.png" alt="ScreenShots" />&nbsp;Screen Shots</span></a></li> </ul> </ul> </li> </li> <li><a href="#">Services</a> <ul> <li><a href="Services/technical-support.html"><span><img src="Icons/techsupport.png" alt="TechnicalSupport" />&nbsp;Technical Support</span></a></li> <li><a href="Services/training.html"><span><img src="Icons/training.png" alt="Training" />&nbsp;Training</span></a></li> <li><a href="Services/customization.html"><span><img src="Icons/customize.png" alt="Customization" />&nbsp;Customization</span></a></li> <li><a href="Services/faqs.html"><span><img src="Icons/faq.png" alt="FAQs" />&nbsp;FAQ's</span></a></li> </ul> </li> <li><a href="#">Industry</a> <ul> <li><a href="Industry/focus.html"><span><img src="Icons/focus.png" alt="focus" />&nbsp;Focus</span></a></li> <li><a href="Industry/customers.html"><span><img src="Icons/customer.png" alt="customer" />&nbsp;Customers</span></a></li> </ul> </li> <li><a href="Contact/contact-information.html">Contact</a> <ul> <li><a href="Contact/contact-information.html"><span><img src="Icons/mail.png" alt="ContactInformation" />&nbsp;Contact Information</span></a></li> <li><a href="Contact/request-information.html"><span><img src="Icons/information.png" alt="RequestInformation" />&nbsp;Request Information</span></a></li> </ul> </li> <li><a href="http://web.qsoftsolutions.com/">Login</a> </li> </ul> </nav> </div> </div> <!-- END MENU NAV BAR CODE --> 

http://jsfiddle.net/gramw/LZAFK/

Answer 1

You will need a html5 shiv to make IE8 (and any other version older than IE9) recognise HTMl5 elements.

This html5shiv script will do it for you, and as the page says you use it like this:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->