title: Clickable HTML/CSS Dropdown Menu with no JS works in Firefox, but not Chrome
body: <p>We were following this tutorial (<a href="http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/" rel="nofollow">http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/</a>). The goal was to create a multilevel dropdown click menu with css/html and no js. The code works fine in firefox and even works in the demo shown in the tutorial in chrome, but downloading the code and using it separately doesn't work in chrome. Anyone have any ideas why? The code for the menu is:</p>
  
  <pre><code>   &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"&gt;
  
  &lt;div class="example"&gt;
      &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="fly" href="#"&gt;Tutorials&lt;/a&gt;
              &lt;ul class="dd"&gt;
                  &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/html-css/"&gt;HTML / CSS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="fly" href="#"&gt;JS / jQuery&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/jquery/"&gt;jQuery&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/javascript/"&gt;JS&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/php/"&gt;PHP&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/mysql/"&gt;MySQL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/xslt/"&gt;XSLT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/ajax/"&gt;Ajax&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a class="fly" href="#"&gt;Resources&lt;/a&gt;
              &lt;ul class="dd"&gt;
                  &lt;li&gt;&lt;a class="fly" href="#"&gt;By category&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/php/"&gt;PHP&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/mysql/"&gt;MySQL&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class="fly" href="#"&gt;Menu1&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Menu2&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="fly" href="#"&gt;Menu3&lt;/a&gt;
                                      &lt;ul&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Menu31&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Menu32&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Menu33&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#"&gt;Menu34&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Menu4&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/category/ajax/"&gt;Ajax&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a class="fly" href="#"&gt;By tag name&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/tag/captcha/"&gt;captcha&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/tag/gallery/"&gt;gallery&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/tag/animation/"&gt;animation&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/about/"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/"&gt;Go Back To The Tutorial&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
     /* demo page styles */
  body {
      background:#eee;
      margin:0;
      padding:0;
  }
  .example {
      background:#fff url(../images/tech.jpg);
      width:770px;
      height:570px;
      border:1px #000 solid;
      margin:20px auto;
      padding:15px;
      border-radius:3px;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
  }
  
  
  /* main menu styles */
  #nav,#nav ul {
      background-image:url(../images/tr75.png);
      list-style:none;
      margin:0;
      padding:0;
  }
  #nav {
      height:41px;
      padding-left:5px;
      padding-top:5px;
      position:relative;
      z-index:2;
  }
  #nav ul {
      left:-9999px;
      position:absolute;
      top:37px;
      width:auto;
  }
  #nav ul ul {
      left:-9999px;
      position:absolute;
      top:0;
      width:auto;
  }
  #nav li {
      float:left;
      margin-right:5px;
      position:relative;
  }
  #nav li a {
      background:#c1c1bf;
      color:#000;
      display:block;
      float:left;
      font-size:16px;
      padding:8px 10px;
      text-decoration:none;
  }
  #nav &gt; li &gt; a {
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
      -o-border-radius:6px;
      border-radius:6px;
  
      overflow:hidden;
  }
  #nav li a.fly {
      background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
      padding-right:15px;
  }
  #nav ul li {
      margin:0;
  }
  #nav ul li a {
      width:120px;
  }
  #nav ul li a.fly {
      padding-right:10px;
  }
  
  /*hover styles*/
  #nav li:hover &gt; a {
      background-color:#858180;
      color:#fff;
  }
  
  /*focus styles*/
      #nav li a:focus {
      outline-width:0;
  }
  
  /*popups*/
  #nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
      left:0;
  }
  #nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
      left:140px;
  }
  </code></pre>