title: I can't get CSS drop-down menu work
body: <p>When I hover my mouse over the dropdown menu, it just doesn't appear, nothing happens, like the whole thing is missing ..</p>
  
  <pre><code>#menu {
      position: relative;
      width: 100%;
      overflow: auto;
      height:25px;
      background: rgb(38, 42, 53);
      /* Old browsers */
      background: -moz-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(38, 42, 53, 1)), color-stop(100%, rgba(40, 45, 63, 1)));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, rgba(38, 42, 53, 1) 0%, rgba(40, 45, 63, 1) 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#262a35', endColorstr='#282d3f', GradientType=0);
      /* IE6-9 */
  }
  ul#menu {
      margin:0;
      padding:0;
      list-style-type: none;
      text-transform: uppercase;
      font-size: 15px;
  }
  ul#menu li {
      display:inline-block;
      float:left;
      margin:0;
      padding:3px 10px 0 70px;
  }
  ul#menu li a {
      display:inline-block;
      float:left;
      color:#84FD00;
      /* #874B46 */
      text-decoration:none;
      padding:0;
      height:12px;
  }
  ul#menu li ul {
      padding: 0;
      position: absolute;
      top:50px;
      left: 0;
      width: 100px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow:none;
      opacity: 0;
      visibility: hidden;
  }
  ul#menu li ul li {
      background: #555;
      dipslay: inline;
      color: #fff;
  }
  ul#menu li ul li:hover {
      background: #666;
  }
  ul#menu li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
  }
  </code></pre>
  
  <p>The code is a mix-up of 2 codes, maybe I didn't get it right. Only the drop-down part is not working(where the ul#menu li ul thing is).</p>
  
  <p>The HTML code: </p>
  
  <pre><code>&lt;ul id="menu"&gt;
              &lt;li&gt;&lt;a href="index.php"&gt;News&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="forum.php"&gt;Forum&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Demos.php"&gt;Demos&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="demos.php"&gt;Recorded demos&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="Rules.php"&gt;Rules&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Administration.php"&gt;Administration&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="search.php"&gt;Search&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>