title: Dropdown menu in table cell via CSS only
body: <p>I have a horizontal navigation bar that I am trying to make in to a dropdown menu by using a list and CSS to display the list when it is hovered over. Since this is in a table I am having issues with it not displaying properly. How do I fix the CSS so that this displays properly? Browser will be IE11 and Chrome. </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#coolMenu,
  #coolMenu ul {
      list-style: none;
  }
  
  #coolMenu {
      float: left;
  }
  #coolMenu &gt; li {
      float: left;
  }
  #coolMenu li a {
      display: block;
      height: 2em;
      line-height: 2em;
      padding: 0 1.5em;
      text-decoration: none;
  }
  #coolMenu ul {
      position: absolute;
      display: none;
      z-index: 999;
  }
  #coolMenu ul li a {
      width: 80px;
  
  }
  #coolMenu li:hover ul {
      display: block;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;td colspan="100%"&gt;
          &lt;table border="1" cellspacing="0" width="100%" align="center"&gt;
              &lt;tr style="text-align:center; font-size:x-small; color-white;"&gt;
                  &lt;td&gt;
                      &lt;ul id="coolMenu"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Link1&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;five&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;ul id="coolMenu"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;Link2&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>