html pictures are over the mega menu

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>

Answer 1

I added z-index: 0 to the cssmenu in the css file and that seemed to work.

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

Answer 2

Please try to use z-index property on the div and set it to be higher priority

Answer 3

Work with the z-index property on your divs

"The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)."

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