CSS меню не работает в IE8

0

Я знаю, что это задавали много раз, но я не могу заставить ничего работать.

Мой CSS Drop down, похоже, работает в каждом браузере, кроме IE8...

Я пробовал добавить в нее игру, и я не могу заставить ее работать

Основной index.html показывает меню просто отлично, как только вы нажмете ссылку, она отправит вас на страницу и отобразит встроенный стиль css.

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

heres код css и 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/

Теги:
internet-explorer-8

1 ответ

1

Вам понадобится html5 shiv, чтобы IE8 (и любая другая версия старше IE9) распознавали элементы HTMl5.

Этот скрипт html5shiv сделает это за вас, и, как говорится на странице, вы используете его следующим образом:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню