Question

我在页面中有以下html（jsfiddle.net/pvaa7o1z/4/）和屏幕顶部的超级菜单。当我将鼠标移到超级菜单链接上时，会出现巨型菜单框，但html图像不在背景组中，因此megamenu项目就像以前一样显示出来。是否有html img的属性，以便它不会干扰大型菜单的外观和感觉。我附上了屏幕的打印照片（福利，补偿，工资单，政策类似于代码中的html图像）。

/* 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

使用div上的z-index属性

＆＃34; z-index属性指定元素的堆栈顺序。

堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。＆＃34;

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

Answer 2

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

Answer 3

我在css文件中的cssmenu中添加了z-index：0，这似乎有效。

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

html图片超过了大型菜单

3 个答案: