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>
z-index
值? - Ramiz Wachtler