1

メニュー「製品」をクリックまたはマウスオーバーすると、別のメニューのリストが表示されます..しかし、メニューバーの下にある画像ブロックがその位置から移動します。css [ position:absolute;] を使用すると、画像ボックスは静的なままになり、製品のサブメニューが画像ブロックと重なってしまいます。これは私が望んでいたことです。ただし、画像ブロックの幅と高さの設定が大幅に変更されるため、配置が損なわれます。plsは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>

親切に助けてください。私の要件は、「製品メニュー」にマウスを合わせると、メニューバーの下にある画像ブロックの上にドロップダウンメニューが表示されることです。

4

1 に答える 1