Bug CSS IE 11

Bug CSS IE 11

by Angelo Rogério Rubin

HTML

<div class="topo">
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; intelbras
</div>
<!-- 
<iframe width="100%" height="60" scrolling="no" name="quadrado">
Intelbras
</iframe>
-->
<div class="menu clearfix">
  <ul class="menu clearfix">
    <li>
      <a href="file://///sjo-senior-03/senior/Processo/Help/Help.htm">
        Home
      </a>
    </li>
    <li>
      <a href="#">
        Tabelas
      </a>
      <!-- Nível 1 -->
      <!-- submenu -->
      <ul class="sub-menu clearfix">
        <li>
          <a href="#">
            Atrasos
          </a>
          <ul class="sub-menu clearfix">
            <li>
              <a href="#">
                Coeficiente INSS
              </a>
            </li>
            <li>
              <a href="#">
                Coeficiente DARF
              </a>
            </li>
            <li>
              <a href="#">
                Atrasos FGTS
              </a>
            </li>
            <li>
              <a href="#">
                Saldos FGTS
              </a>
            </li>
            <li>
              <a href="#">
                Gerar ITRD
              </a>
            </li>
          </ul>
          <!-- submenu do submenu -->
        </li>
        <li>
          <a href="#">
            Cargos
          </a>
          <ul class="sub-menu clearfix">
            <li>
              <a href="file://///sjo-senior-03/senior/Processo/Help/HTML/Tabelas/Tabelas_Cargos/Tabelas_Cargos/Cargos.htm" target="link">
                Cargos
              </a>
              <li>
                <a href="file://///sjo-senior-03/senior/Processo/Help/HTML/Tabelas/Tabelas_Cargos/Tabelas_CBO/CBO.htm" target="link">
                  CBO
                </a>
            </li>
            <li>
              <a href="file://///sjo-senior-03/senior/Processo/Help/HTML/Tabelas/Tabelas_Cargos/Tabelas_CBO2002/CBO_2002.htm" target="link">
                CBO 2002
              </a>
            </li>
            <li>
              <a...

CSS

ul.menu, .menu li, .menu a{ 
margin:0; 
padding:0; 
}
 
ul.menu ul{ 
position:absolute; 
display:none; 
box-shadow:3px 3px 2px #333;
}
 
body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
 
.clearfix:after{
content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
 
.menu,
.sub-menu {
    list-style: none;
    background: #999;
}
 
.sub-menu {
    background: #999;
}
 
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 700;
}
 
.menu li {
    position: relative;
}
 
.menu > li {
    float: left;
}
 
.menu > li:hover {
    background: #24C634;
}
 
.menu li:hover > .sub-menu {
    display: block;
}
 
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
white-space: nowrap; /* remove quebra de linha */
}
 
.sub-menu li:hover {
    background: #24C634;
 
}
 
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}
 
.rodape {
width: 100%;
bottom: 0;
background: #24C634;
font-weight: 700;
position: relative;
color: #FFFFFF;
}
 
.topo {
background: #24C634;
width:100%;
height: 90px;
font: Verdana, Geneva, sans-serif;
font-size: 68px;
color: #FFFFFF;
font-weight:bolder;
}