如何在图像上重叠菜单列表

单击菜单"product"或将鼠标悬停在其上时，将显示另一个菜单列表。。但是位于菜单栏下方的图像块移动离开该位置。如果我使用css[position:absolute；]，那么图像框保持静态，并且产品的子菜单与图像块重叠，这正是我想要的。但是图像块的宽度&高度设置急剧变化，从而破坏对齐。请检查jsFiddle 中的编码

.home_menu {
  border: 1px solid black;
  width: 98%;
  height: 3.3%;
  margin-right: auto;
  margin-left: auto;
}
div#menuDemo {
  clear: both;
  //border:1px solid black;
  height: 78%;
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
  background-color: #A55927;
  /*Remove this next one in production - Used for demo purpose only*/
  margin-bottom: 0.1%;
  padding-top: 0.7%;
  z-index: 4;
}
div#menuDemo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #A55927;
}
div#menuDemo > ul > li {
  float: left;
  text-align: center;
}
div#menuDemo ul li {
  width: 25%;
  //border: 5px solid purple;
}
div#menuDemo ul li a {
  text-decoration: none;
  font-weight: bolder;
  text-align: center;
}
div#menuDemo > ul > li > ul {
  display: none;
  text-align: center;
}
div#menuDemo > ul > li:hover > ul {
  display: block;
  text-align: center;
}
.sub1 {
  width: 100%;
  //border:1px solid green;
}
.colouring {
  color: black;
  font-weight: bolder;
}
.colour {
  //border:1px solid blue;
  color: black;
  text-align: center;
  //width:100%;
}
.wrapper {
  border: 5px solid pink;
  width: 98.8%;
  height: 82%;
  margin-top: 1%;
  z-index: 2;
}
.uniform_block {
  border: 5px solid green;
  width: 100%;
  height: 40%;
  cursor: pointer;
}
.uniform_block img {
  width: 100%;
  height: 100%;
}

<body>
  <div class="home_menu">
    <div id="menuDemo">
      <ul>
        <li id="homeMenu"><a href="#menuHome" class="colour">About Us</a>
        </li>
        <!--  <li ><a href="#menuHome" class="colour">About Us</a></li> -->
        <li><a href="#" class="colour" id="expand">Products</a>
          <ul class="sub1">
            <li> <a href="#" class="colouring"> Uniforms </a>
              <ul>
                <li> <a href="#" class="colour"> &nbsp;&nbsp </a>
                </li>
                <li> <a href="#" class="colour"> Automobile&nbsp;Industry&nbsp;Uniforms </a>
                </li>
                <li> <a href="#" class="colour"> Pharmaceutical&nbsp;Uniforms </a>
                </li>
                <li> <a href="#" class="colour"> Food&nbsp;Industry&nbsp;Uniforms </a>
                </li>
                <li> <a href="#" class="colour"> Government&nbsp;Sector&nbsp;Uniforms </a>
                </li>
                <li> <a href="#" class="colour"> School/College&nbsp;Uniforms </a>
                </li>
                <li> <a href="#" class="colour"> &nbsp;&nbsp </a>
                </li>
              </ul>
            </li>
            <li><a href="#" class="colouring">Shoes</a>
              <ul>
                <li> <a href="#" class="colour"> &nbsp;&nbsp </a>
                </li>
                <li> <a href="#" class="colour"> Industrial&nbsp;Shoes </a>
                </li>
                <li> <a href="#" class="colour"> Safety&nbsp;&&nbsp;Security&nbsp;Shoes </a>
                </li>
                <li> <a href="#" class="colour"> Executive&nbsp;Shoes</a>
                </li>
                <li> <a href="#" class="colour"> &nbsp;&nbsp </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" class="colour">Contact Us</a> 
        </li>
      </ul>
    </div>
  </div>
  <div class="wrapper">
    <div class="uniform_block">
      <img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" />
    </div>
    <div class="home_footer">
      <div class="footer_contents"></div>
    </div>
  </div>
</body>

好心帮忙。我的要求是，当我把鼠标放在"产品菜单"上时，下拉菜单应该在菜单栏下方的图像块上方查看。

将position:absolute添加到ul菜单的css（在本例中为sub1类），并删除宽度：100%，以便它可以继承其父级的默认宽度。绝对定位将防止浏览器试图将ul元素放在页面上的上一个元素之后。

ul.sub1 {
    position:absolute;
}

http://jsfiddle.net/C2YXp/2/

相关内容

最新更新

热门标签：