title: Making drop-down style menus stay when not hovering over them
body: <p>I found a guide to make drop-down menus, and it said that when you would stopped hovering on the main menu item, the drop-down menus would stay fixed. However, my menu just disappears, making it impossible to press the items! </p>
  
  <p>As you can see, it's the Music menu bit that has the drop-down (or in this case, "drop-right") menu.</p>
  
  <p>Fiddle here:
  <a href="http://jsfiddle.net/Gb2aS/" rel="nofollow">http://jsfiddle.net/Gb2aS/</a></p>
  
  <p>Code here:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link href="stylesheet.css" rel="stylesheet" type="text/css"&gt;
      &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ID="menubox"&gt;
          &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://folk.ntnu.no/arnstekl/" class="link"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="link"&gt;Music&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="https://soundcloud.com/arnsteinkleven/" class="link"&gt;My music&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://folk.ntnu.no/arnstekl/gilberto.html" class="link"&gt;The Joao Gilberto project&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="https://www.github.com/arnstein" class="link"&gt;Github&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="http://www.flickr.com/photos/92472314@N03/" class="link"&gt;Pictures&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;div ID="circle"&gt;
          &lt;p ID="title"&gt; A &lt;br&gt; r &lt;br&gt; n &lt;br&gt; s &lt;br&gt; t &lt;br&gt; e &lt;br&gt; i &lt;br&gt; n &lt;/p&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menubox
  {
      width: 8%;
      height: 30%;
      border: 10% solid #C7D93D;
      border-radius: 5%;
      position: fixed;
      margin-top: 12%;
      margin-left: 18%;
      font-family: Ubuntu, Lucida console, Futura;
      list-style: none;
      float: left;
  }
  
  
  #menubox ul li a
  {
      text-align: left;
      font-size: 200%;
      color: #FFF0A5;
  }
  
  #menubox ul li
  {
      color: #468966;
      font-family: Ubuntu, Lucida console, Futura;
      float: left;
      margin-right: 10px;
      position: relative;
  }
  
  #menubox ul
  {
      color: #468966;
      font-family: Ubuntu, Lucida console, Futura;
  }
  
  #menubox ul ul
  {
      position: absolute;
      left: -9999px;
      list-style: none;
  }
  
  #menubox ul ul li
  {
      float: left;
      margin-left: 40%;
      position: relative;
      font-size: 60%;
      text-align: left;
  
  }
  
  #menubox ul ul a
  {
      white-space: nowrap;
  }
  
  #menubox ul li:hover a
  {
      text-decoration: none;
      color: #FFB03B;
  } 
  
  #menubox ul li:hover ul
  {
      left: 0;
  }
  
  #menubox ul li:hover ul a
  {
      text-decoration: none;
      color: #FFB03B;
  }
  
  #menubox ul li:hover ul li a:hover
  {
      color: #FFB03B;
  }
  
  
  div p
  {
      color: #FFF0A5;
      text-align: center;
      position: relative;
      vertical-align: middle;
      display: inline-block;
      margin-top: 300px;
      line-height: 60px;
  }
  
  
  #circle
  {
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      background-color: #B64926;
      width: 500px;
      height: 500px;
      display: block;
      position: fixed;
      margin-top: 9%;
      margin-left: 52%;
      text-align: center;
  }
  
  #title
  {
      text-color: #FFF0A5;
      font-size: 350%;
      display: inline;
      text-align: center;
  }
  
  body
  {
      height: 100%;
      width: 100%;
      background-color: #468966;
      font-family: Ubuntu, Lucida console, Futura;
  }
  
  .link
  {
      text-color: #FFF0A5;
      text-decoration: none;
      text-align: left;
  }
  </code></pre>