Выпадающее меню CSS не работает

Изучая основы CSS и пытаясь создать выпадающее меню, я попытался создать выпадающее меню с использованием простого CSS, но этоне работает.

Пока я попробовал этот код:

CSS


*{
    margin: 0px;
    padding: 0px;}

body
{
    font-family: verdana;
    background-color: ABC;
    padding: 50px;
}

h1
{
    text-align: center;
    border-bottom: 2px solid #009;
    margin-bottom: 50px;
}

/*rules for navigation menu */
/*============================================*/
ul#navmenu, ul.sub1
{
    list-style-type: none;

}

ul#navmenu li
{
    outline: 1px solid red;
    width: 125px;
    text- align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}

ul#navmenu a
{
    text-decoration: none;
    display: block; 
    width: 125px;
    height: 25px;
    line-height: 25px;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
}

ul#navmenu .sub1 li
{

}

ul#navmenu .sub1 a 
{
    margin-top: 0px;
}

ul#navmenu li:hover > a
{
 background-color: #CFC; 
}

ul#navmenu li:hover a: hover
{
    background-color: #FF0;  
}

ul#navmenu ul.sub1
{
    display: none;
    position: absolute;
    top: 26px;
    left: 0px;

}

ul#navmenu li:hover .sub1
{
    display: block;
}

HTML

Navigation Menu


<a href="#">Hyperlink 1</a>
<a href="#">Hyperlink 2</a>
     
        <a href="#">Hyperlink 2.1</a>
        <a href="#">Hyperlink 2.2</a>
    
<a href="#">Hyperlink 3</a>
<a href="#">Hyperlink 4</a>




Выпадающее меню не работает, оноя не скрываю подменюне знаю почему.

Вот снимок экрана с использованием Internet Explorer:

IE

При использовании Google Chrome:

Хром

Я могу'двигаться дальше :( Любое предложение, почему не работает выпадающее меню и почемуПо-разному показывать в других браузерах? Есть ли способ, как кодировать выпадающее меню CSS, где оно будет отображаться в любом браузере? Заранее спасибо.

Ответы на вопрос(4)

Ваш ответ на вопрос