title: Css ul display is none when hover display is block
body: <p>I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.</p>
  
  <p>I know I have <code>display:none;</code> in <code>ul style</code> but can you change that to <code>display:block;</code> when hovered over the word info?</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;ul id="Menu"&gt;
       &lt;li&gt;&lt;a href="Index.html"&gt;Home &lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="Info.html"&gt;Info &lt;/a&gt;
            &lt;ul style="display:none;"&gt;
               &lt;li&gt;&lt;a href="Index.html"&gt;Program&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="Index.html"&gt;Getting Started&lt;/a&gt;&lt;li&gt;
               &lt;li&gt;&lt;a href="Index.html"&gt;Credits&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li&gt;&lt;a href="Community.html"&gt;Video &lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="Store.html"&gt;server &lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="Profile.html"&gt;Profile &lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="Help"&gt;Help&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS Code:</p>
  
  <pre><code>#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 &gt; 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;}
  </code></pre>
  
  <p>Help in advanced. any help is apreciated :)
  also post a code not only telling me whats wrong thanks!</p>