Problema com sub menu (oculta as não aparece)[RESOLVIDO]

Front-end CSS
,
#1

Boa noite pessoal, estou aprendendo html5 e css3, porem cheguei numa parte do meu curso que não consigo fazer funcionar, já procurei outras fontes e nenhuma funciona. Fiz um menu horizontal que quando o usuário passa o mouse por cima deveria aparecer um sub-menu, porem não acontece de maneira alguma.

Eis o codigo html

Curso de html5
  • Inicio
  • O Canil
  • A raça
    • Historia
    • Padrão
    • Curiosidades
  • Filhotes

e o codigo CSS

  • {
    margin: 0;
    padding: 0;
    font-family: Verdana;
    font-size: 95%;
    }

/*retira os marcadores de listas (bolas) */
ul {
list-style-type: none;
}

/configura menu/
ul li{
background-color: #ccc;
width: 150px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
cursor: pointer;
}

/evento hover, muda cor de fundo/
ul li:hover {
background-color: #fff;
}

/formata sub menu/
ul li ul li{
text-align: left;
box-sizing: border-box;
padding-left: 5px;
}

/esconde sub menu/
ul li ul {
display: none;
}

/evento hover, mostra submenu/
ul li: hover ul{
display: block;
}

#2

Tente sem espaço entre o li: e o hover

/*evento hover, mostra submenu*/
ul li:hover ul{
#3

Tentei e não funcionou, é um mistério, peguei um codigo pronto de outra pessoa e assim mesmo não funcionou.

#4

testei aqui e funcionou

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
              margin: 0;
              padding: 0;
              font-family: Verdana;
              font-size: 95%;
            }

                /*retira os marcadores de listas (bolas) */
            ul {
              list-style-type: none;
            }

                /*configura menu*/
            ul li {
              background-color: #ccc;
              width: 150px;
              height: 30px;
              float: left;
              text-align: center;
              line-height: 30px;
              cursor: pointer;
            }

                /*evento hover, muda cor de fundo*/
            ul li:hover {
              background-color: #fff;
            }

                /*formata sub menu*/
            ul li ul li {
              text-align: left;
              box-sizing: border-box;
              padding-left: 5px;
            }

                /*esconde sub menu*/
            ul li ul {
              display: none;
            }

                /*evento hover, mostra submenu*/
            ul li:hover ul {
              display: block;
            }
        </style>
    </head>
    <body>
        <p>Curso de html5</p>
        <ul>
            <li>Inicio</li>
            <li>O Canil</li>
            <li>A raça
                <br />
                <ul>
                    <li>Historia</li>
                    <li>Padrão</li>
                    <li>Curiosidades</li>
                </ul>
            </li>
            <li>Filhotes</li>
        </ul>
    </body>
</html>
#5

Funcionou, eu tava contando que ia abrir um sub-menu de outro menu kkkk , obrigado