title: CSS - Why does this behave differently in Firefox/IE/Chrome?
body: <p>I've got a pure CSS multi-layered drop-down menu (crazy, I know) and although it works perfectly in Firefox, when my friends checked the site using other browsers it kinda messed up:</p>
  
  <ul>
  <li>Internet Explorer adds a few pixels between drop-down menus, so you have to move the cursor really fast or it disappears</li>
  <li>Chrome makes them unusable by displaying submenus on top of each other</li>
  </ul>
  
  <p>The website is <a href="http://omartahir.com" rel="nofollow">omartahir.com</a> (yay, go me!) and the dropdown menus appear if you hover over 'Programming' and then one of the submenus, e.g. 'C++' - in IE there is a gap, and in Chrome the menu doesn't come out to the side but instead goes straight down!</p>
  
  <p>Can anyone shed some light as to why this is happening? I'm not at all experienced with cross-browser compatibility or the differences between them :(</p>
  
  <p>Here's the CSS (sorry there's so much!):</p>
  
  <pre><code>.navbutton
  {
      color:#BBBBBB;
      background-color:rgba(255, 255, 255, 0.85);
      text-align:center;
      font-size:18px;
      display:inline-block;
      width:120px;
      height:45px;
      padding-top:17px;
      padding-left:5px;
      padding-right:5px;
      transition:all 0.3s;
      position:relative;
      z-index:1;
  }
  
  .navbutton2line
  {
      height:55px;
      padding-top:7px;
  }
  
  .navbutton:hover, #navbuttonselected:hover
  {
      color:#111111;
      transition-delay:0s;
  }
  
  #navbuttonselected
  {
      color:#FFFFFF;
      background-color:#00A2E8;
  }
  
  /* CSS Dropdown Menu */
  
  /* Programming */
  #programming
  {
      display:inline-block;
  }
  
  #programming &gt; div
  {
      display:none;
  }
  
  #programming:hover &gt; div
  {
      display:block;
      position:absolute;
  }
  
  /* /programming/cpp */
  #cpp
  {
      display:inline-block;
  }
  
  #cpp &gt; div
  {
      display:none;
  }
  
  #cpp:hover &gt; div
  {
      display:inline-block;
      position:absolute;
  }
  
  /* /programming/web */
  #web
  {
      display:inline-block;
  }
  
  #web &gt; div
  {
      display:none;
  }
  
  #web:hover &gt; div
  {
      display:inline-block;
      position:absolute;
  }
  
  /* /programming/python */
  #python
  {
      display:inline-block;
  }
  
  #python &gt; div
  {
      display:none;
  }
  
  #python:hover &gt; div
  {
      display:inline-block;
      position:absolute;
  }
  
  /* /programming/basic */
  #basic
  {
      display:inline-block;
  }
  
  #basic &gt; div
  {
      display:none;
  }
  
  #basic:hover &gt; div
  {
      display:inline-block;
      position:absolute;
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div id="navbar"&gt;
              &lt;a href="/index.php" class="navbutton" id="navbuttonselected"&gt;Home&lt;/a
              &gt;&lt;a href="/about.htm" class="navbutton"&gt;About Me&lt;/a
              &gt;&lt;div id="programming"&gt;&lt;a href="/programming.htm" class="navbutton"&gt;Programming&lt;/a&gt;
                  &lt;div&gt;
                      &lt;div id="cpp"&gt;&lt;a href="/programming/cpp.htm" class="navbutton"&gt;C++&lt;/a&gt;
                          &lt;div&gt;
                              &lt;div&gt;&lt;a href="/programming/cpp/shooter.htm" class="navbutton navbutton2line"&gt;Shooter Game&lt;/a&gt;&lt;/div&gt;
                              &lt;div&gt;&lt;a href="/programming/cpp/invoker.htm" class="navbutton navbutton2line"&gt;Invoker Practice&lt;/a&gt;&lt;/div&gt;
                              &lt;div&gt;&lt;a href="/programming/cpp/gameoflife.htm" class="navbutton"&gt;Game of Life&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/br&gt;
                      &lt;div id="web"&gt;&lt;a href="/programming/web.htm" class="navbutton navbutton2line"&gt;Web Development&lt;/a&gt;
                          &lt;div&gt;
                              &lt;div&gt;&lt;a href="/programming/web/site.htm" class="navbutton"&gt;This Site&lt;/a&gt;&lt;/div&gt;
                              &lt;div&gt;&lt;a href="/programming/web/coursework.htm" class="navbutton"&gt;Coursework&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/br&gt;
                      &lt;div id="python"&gt;&lt;a href="/programming/python.htm" class="navbutton"&gt;Python&lt;/a&gt;
                          &lt;div&gt;
                              &lt;div&gt;&lt;a href="/programming/python/p1.htm" class="navbutton"&gt;p1&lt;/a&gt;&lt;/div&gt;
                              &lt;div&gt;&lt;a href="/programming/python/p2.htm" class="navbutton"&gt;p2&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/br&gt;
                      &lt;div id="basic"&gt;&lt;a href="/programming/basic.htm" class="navbutton"&gt;SuperBASIC&lt;/a&gt;
                          &lt;div&gt;
                              &lt;div&gt;&lt;a href="/programming/basic/b1.htm" class="navbutton"&gt;b1&lt;/a&gt;&lt;/div&gt;
                              &lt;div&gt;&lt;a href="/programming/basic/b2.htm" class="navbutton"&gt;b2&lt;/a&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>