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