Menu xhtml no IE

Caros colegas;

fiz o menu que envio abaixo, e estou com o seguinte problema. há submenu que aparece normalmente no Chrome, já no internet explorer não aparece. Será que alguém poderia me informar como arrumar este detalhe?

Agradeço.

CÓDIGO HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Página Principal</title>
    </head>
    <link rel="stylesheet" href="menuestilo.css" />
    <body>
        <ul id="menu-bar">
            <li><a href="#">Início</a></li>
            <li><a href="#">Cadastros</a></li>
            <ul>
                <li><a href="#">Alunos</a></li>
                <li><a href="#">Professores</a></li>
                <li><a href="#">Turma</a></li>
                <li><a href="#">Curso</a></li>
            </ul>
        </ul>
    </body>
</html>

CÓDIGO CSS

#menu-bar{
    margin: 0px 0px 0px 0px;
    padding: 6px 6px 6px 6px;
    padding-right: 50%;
    height: 34px;
    line-height: 100%;
    border-radius: 24px;
    box-shadow: 2px 2px 3px #666666;
    background: #191970; /*cor de fundo do menu*/
    border: solid 1px #6d6d6d;
}
#menu-bar li{
    margin: 0px 6px 6px 6px;
    padding: 0px 0px 6px 0px;
    float: left;
    position: relative;
    list-style: none;
}
#menu-bar a{
    font-weight: bold;
    font-family: arial;
    font-style: normal;
    font-size: 12px;
    color: #e7e5e5; /* cor das letras */
    text-decoration: none;
    display: block;
    padding: 8px 20px 8px 20px;
    margin: 0;
}
#menu-bar .current a, #menu-bar li:hover > a{
    background: #0399d4;
    color: #191970; /* cor de fundo do nomes no menu */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 2);
    text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
    background: none;
    border: none;
    color: #666;
}
#menu-bar ul a:hover{
    background: #191970 !important; /* cor de fundo dos itens do submenu*/
    color: #FFFFFF !important;
}
#menu-bar ul{
    background: #DDDDDD transparent; /*cor de fundo do submenu*/
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 30px;
    left: 0;
    border: solid 1px #b4b4b4;
    border-radius: 10px;
}
#menu-bar li:hover > ul{
    display: block;
}
#menu-bar ul li{
    float: none;
    margin: 0;
    padding: 0;
}
#menu-bar ul a{
    padding: 10px 0px 10px 15px;
    color: #424242 !important;
    font-size: 12px;
    font-style: normal;
    font-family: arial;
    font-weight: normal;
    text-shadow: 2px 2px 3px #ffffff;
}

1 Resposta

Topicos relacionados