Css ul display is none when hover display is block

Question

Я работаю над выпадающим меню, но единственное, что doenst хочет работать, - это когда я наводил курсор на слово Info в неупорядоченном списке, выпадающий список не отображается.

Я знаю, что у меня есть display:none; в ul style, но можете ли вы изменить его на display:block; при наведении курсора на слово info ??

Мой HTML код:

<ul id="Menu"> 
    <li><a href="Index.html">Home </a></li> 
    <li><a href="Info.html">Info </a> 
      <ul style="display:none;"> 
      <li><a href="Index.html">Program</a></li> 
      <li><a href="Index.html">Getting Started</a><li> 
      <li><a href="Index.html">Credits</a></li> 
     </ul> 
    </li> 
    <li><a href="Community.html">Video </a></li> 
    <li><a href="Store.html">server </a></li> 
    <li><a href="Profile.html">Profile </a></li> 
    <li><a href="Help">Help</a></li> 
</ul> 

А вот мой Css Код:

#Menu { 
list-style:none; 
font-size:16px; 
font-weight:Bold; 
padding:14px 0 0; 
width:415px; 
margin-top:0; 
float:left; 
margin-left:0; 
} 

#menu { list-style:none;} 
li:hover > ul {display:list-item;} 
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;} 
li { float:left; margin-left:10px; } 
li ul li { float:none; margin:0; display:inline;} 
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;} 
li { display: list-item; text-align: -webkit-match-parent;} 
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;} 

Помощь в продвинутым. любая помощь приветствуется :) также опубликовать код, который не только говорит мне, что не так спасибо!

Answer 1

использование #Menu перед вашими именами классов CSS: DEMO

как: #Menu li:hover > ul {display:list-item;}

NOTIC: названия CSS классов чувствительны к регистру

Answer 2

Я имею в виду, что это потому что html-код содержит встроенный display:none. Внутри <ul>, мы должны удалить <ul style="display:none;"> в вышеуказанном html.