title: CSS drop-down menu bar, transparent with rounded corners
body: <p>Looking for a menu that resembles:</p>
  
  <p><img src="https://i.imgur.com/IWuUg.png" /></p>
  
  <p>Having the following requirements:</p>
  
  <ul>
  <li>Transparent with rounded corners</li>
  <li>Floats at the top of the browser window</li>
  <li>Mostly hidden until the cursor approaches</li>
  <li>Cross-browser (except for IE6) and mobile support</li>
  <li>Uses <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code></li>
  <li>Uses jQuery or CSS</li>
  <li>Width stretches dynamically, based on number of menu items</li>
  <li>Optionally, supports multiple levels</li>
  </ul>
  
  <p>I have looked through some of the following:</p>
  
  <p><a href="http://www.cssplay.co.uk/menus/" rel="nofollow noreferrer">http://www.cssplay.co.uk/menus/</a></p>
  
  <p>But did not find examples that quite fit the desired look.</p>
  
  <p>What web sites show how to implement a menu system with most of the given requirements?</p>
  
  <p>Thank you!</p>
  
  <h2>Related Links</h2>
  
  <p>Links that show how to implement various parts of this problem:</p>
  
  <ul>
  <li><a href="http://www.quackit.com/css/codes/css_floating_menu.cfm" rel="nofollow noreferrer">http://www.quackit.com/css/codes/css_floating_menu.cfm</a></li>
  <li><a href="http://www.css3.info/introduction-opacity-rgba/" rel="nofollow noreferrer">http://www.css3.info/introduction-opacity-rgba/</a></li>
  <li><a href="http://www.cssportal.com/css3-rounded-corner/" rel="nofollow noreferrer">http://www.cssportal.com/css3-rounded-corner/</a></li>
  <li><a href="http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/" rel="nofollow noreferrer">http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/</a></li>
  <li><a href="http://sperling.com/examples/menuh/" rel="nofollow noreferrer">http://sperling.com/examples/menuh/</a></li>
  <li><a href="http://tympanus.net/Tutorials/FixedFadeOutMenu/" rel="nofollow noreferrer">http://tympanus.net/Tutorials/FixedFadeOutMenu/</a></li>
  <li><a href="http://tympanus.net/Tutorials/FixedNavigationTutorial/" rel="nofollow noreferrer">http://tympanus.net/Tutorials/FixedNavigationTutorial/</a></li>
  <li><a href="http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/" rel="nofollow noreferrer">http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/</a></li>
  <li><a href="http://d2o0t5hpnwv4c1.cloudfront.net/386_navigation/top-nav-demo/index.html" rel="nofollow noreferrer">http://d2o0t5hpnwv4c1.cloudfront.net/386_navigation/top-nav-demo/index.html</a></li>
  </ul>