HTML图片超出了超级菜单

Question

I have the following html in a page (jsfiddle.net/pvaa7o1z/4/) and mega menu on the top the screen. When I move my mouse over mega menu link the mega menu box appears but the html images are not in the backgroup thus the megamenu items are showing up like they used to. Is there a property for the html img so that it wont interfere with mega menu look and feel. I attached a print shot of the screen (benefits, compensation, payroll, policies are similar to html images that are in the code).

/* Base CSS */

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}

#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

#cssmenu ul {
  position: relative;
  z-index: 397;
}

#cssmenu ul li {
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
}

#cssmenu ul li:hover {
  position: relative;
  z-index: 99;
  cursor: default;
}

#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 398;
  width: 100%;
}

#cssmenu ul ul ul {
  top: 0px;
  left: 99%;
}

#cssmenu ul li:hover > ul {
  visibility: visible;
}

#cssmenu ul ul {
  bottom: 0px;
  left: 0;
}


/* Custom CSS Styles */

#cssmenu ul {
  width: 200px;
}

#cssmenu ul ul {
  width: 150px;
}

#cssmenu ul li {
  padding: 7px 10px;
  color: #0072C6;
}

#cssmenu ul li.hover,
#cssmenu ul li:hover {
  background: #0072C6;
  color: #fff;
}

#cssmenu ul a:link,
#cssmenu ul a:visited {
  color: #000;
  text-decoration: none;
}

#cssmenu ul a:hover {
  color: #000;
}

#cssmenu ul a:active {
  color: #ffa500;
}

<div id='cssmenu'>
  <ul>
    <table cellpadding="1" cellspacing="1" style="width: 100%;">
      <tbody>
        <tr>
          <td>
            <li><img alt="CNN" src="http://static1.squarespace.com/static/51009bd0e4b0f1d8c3160fda/t/5575d9c5e4b09a6eed955b29/1433786822030/BJy1VKFe.png" style="width: 100px; height: 100px;" />
              <ul>
                <li><a href='www.cnn.com'><span>CNN Item 1</span></a></li>
                <li><a href='www.cnn.com/world'><span>CNN Item 2</span></a></li>
              </ul>
            </li>
          </td>
          <td>
            <li>
              <img alt="E-Trade" src="http://s1.2mdn.net/viewad/4601119/200x60_logo.png" style="width: 100px; height: 30px;" />
              <ul>
                <li><a href='www.etrade.com'><span>Etrade Item 1</span></a></li>
                <li><a href='www.etrade.com'><span>Etrade Item 2</span></a></li>
              </ul>
            </li>
          </td>

          <td>
            <li>
              <img alt="NBC" src="http://sliptalk.s3.amazonaws.com/wp-content/uploads/2014/07/08195333/Screen-Shot-2014-07-08-at-1.41.24-PM.png" style="width: 100px; height: 89px;" />
              <ul>
                <li><a href='www.NBC.com'><span>NBC Item 1</span></a></li>
                <li><a href='www.NBC.com'><span>NBC Item 2</span></a></li>
                <li><a href='www.NBC.com'><span>NBC Item 3</span></a></li>
                <li><a href='www.NBC.com'><span>NBC Item 4</span></a></li>
                <li><a href='www.NBC.com'><span>NBC Item 5</span></a></li>
              </ul>
            </li>
          </td>
          <td>
          <li>
          <img alt="ABC" src="http://www.brandsoftheworld.com/sites/default/files/styles/logo-thumbnail/public/092015/abc_network_logo.png?itok=M5JV7TOM" style="width: 100px; height: 100px;" />
                        <ul>
                <li><a href='www.abc.com'><span>ABC Item 1</span></a></li>
                <li><a href='www.aBC.com'><span>ABC Item 2</span></a></li>
                <li><a href='www.aBC.com'><span>ABC Item 3</span></a></li>
                <li><a href='www.aBC.com'><span>ABC Item 4</span></a></li>
                <li><a href='www.aBC.com'><span>ABC Item 5</span></a></li>
              </ul>
          </li>
          </td>
          <td>
          <li>
          <img alt="FOX" src="http://vignette4.wikia.nocookie.net/logopedia/images/b/b2/Fox1987.png/revision/latest?cb=20140131183312" style="width: 100px; height: 76px;" />
                                  <ul>
                <li><a href='www.fox.com'><span>FOX Item 1</span></a></li>
                <li><a href='www.fox.com'><span>FOX Item 2</span></a></li>
                <li><a href='www.fox.com'><span>FOX Item 3</span></a></li>
                <li><a href='www.fox.com'><span>FOX Item 4</span></a></li>
                <li><a href='www.fox.com'><span>FOX Item 5</span></a></li>
              </ul>
          
          </li>
          </td>
        </tr>
      </tbody>
    </table>

  </ul>
</div>

- Fuji - H2O

---

增加超级菜单的 z-index 值？ - Ramiz Wachtler

实际上，当我去掉 CSS 后，超级菜单就正常工作了。因此，看起来 CSS 是问题所在。 - Fuji - H2O

Answer 1

与div一起使用z-index属性

"z-index属性指定元素的堆栈顺序。

具有较大堆栈顺序的元素始终在堆栈顺序较低的元素前面。

注意：z-index仅适用于定位元素（position:absolute、position:relative或position:fixed）。”

http://www.w3schools.com/cssref/pr_pos_z-index.asp

- Elow

---

我在原始帖子中发布了代码。我从两个地方的CSS中删除了z-index，但这并没有帮助。HTML图像仍然出现在超级菜单的前面。 - Fuji - H2O

Answer 2

请尝试在 div 上使用 z-index 属性，并将其设置为更高的优先级。

- user5688298

Answer 3

我在CSS文件中为cssmenu添加了z-index: 0，这似乎起作用了。

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
  z-index:0;
}

- Fuji - H2O