当另一个打开时，如何阻止DIV元素移动？ （菜单和子菜单）

Question

我想要的图标不会移动，但会加载带有更多图标的子菜单。 但是，使用我当前的代码，菜单打开时主图标会跳转。 我相信我的问题出在CSS中。

的CSS

body {
    background: url("http://taqwamagazine.com/wp-content/uploads/2013/11/grey-striped-background-2072.png");
    background-size: cover;
}
#all{
  background: rgba(255, 255, 255, .7);
  position: relative;
  width: 1200px;
  margin: auto;
}
#icons {
background: -moz-linear-gradient(top, rgba(178,225,255,0.8) 0%, rgba(102,182,252,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,225,255,0.8)), color-stop(100%,rgba(102,182,252,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(178,225,255,0.8) 0%,rgba(102,182,252,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(178,225,255,0.8) 0%,rgba(102,182,252,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(178,225,255,0.8) 0%,rgba(102,182,252,0.8) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(178,225,255,0.8) 0%,rgba(102,182,252,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccb2e1ff', endColorstr='#cc66b6fc',GradientType=0 ); /* IE6-9 */
  position: relative;
  top: 0;
  height: 120px;
  padding: 0px;
  width: 1200px;
  zindex: 3;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px; 
  border-top-left-radius: 10px; 
}
#tile {
  position: relative;
  top: 0px;
  padding: 2.5px;
  zindex: 3;
}
#icon {
background: url("http://mikefougnie.magix.net/mikefougnie/projects/testicon.png");
    background-size: 100px 100px;
    background-repeat: strech; 
  position: relative;
  top: 5px;
  left: 5px;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 20px;
  zindex: 5;
}
#links1 {
background: -moz-linear-gradient(top, rgba(69,72,77,0.7) 0%, rgba(68,71,76,0.7) 1%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,0.7)), color-stop(1%,rgba(68,71,76,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69,72,77,0.7) 0%,rgba(68,71,76,0.7) 1%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69,72,77,0.7) 0%,rgba(68,71,76,0.7) 1%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69,72,77,0.7) 0%,rgba(68,71,76,0.7) 1%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(69,72,77,0.7) 0%,rgba(68,71,76,0.7) 1%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b345484d', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
  position: relative;
  top: -1px;
  left: -65px;
  padding: 10px;
  width: 242px;
  height: 440px;
  border: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px; 
  border-top-left-radius: 10px; 
  text-color: transparent; 
  zindex: 4;
  box-shadow: 1px 1px 2px black, 0 0 25px blue
}

#menugrid, td {
  position: relative; 
  vertical-align: top; 
  horizontal-align: center;
  padding: 0px;
  width: 1000px;
}

#menugrid, table{
  position: relative; 
  vertical-align: top; 
  horizontal-align: center;
  padding: 0px;
  width: 100;
}

#links1, h5 {
  text-align: center;
  color: #fefefe;
  font-weight: normal;
  text-size: 25px;
  padding: 0px;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

#arrow-up {
  position: relative;
  left: 35px;
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid black;
  align: center;
  zindex: 9;
}

的HTML

<div id="all">
  <div id="icons">
    <table id="menugrid" width="100%">
      <tr>
        <td><h1>Dock Ribbon</h1></td><td>
          <div id="tile">
            <a href="#" onclick="toggle_visibility('block1');"><div id="icon"></div></a>
            <div id="block1" style="display:none;">
              <div id="arrow-up"></div>
              <div id="links1">
                <h1>Menu  One Title</h1>
                  <table>
                    <tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                      </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                    </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                  </table> <!-- Menu -->
              </div><!-- links -->
            </div><!-- tile -->
        </td>
        <td>
        <div id="tile">
            <a href="#" onclick="toggle_visibility('block2');"><div id="icon"></div></a>
            <div id="block2" style="display:none;">
              <div id="arrow-up"></div>
              <div id="links1">
                <h1>Menu Two Title</h1>
                  <table>
                    <tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                      </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                    </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                  </table> <!-- Menu -->
              </div><!-- links -->
            </div><!-- tile -->
          </td>
        <td><div id="tile">
            <a href="#" onclick="toggle_visibility('block3');"><div id="icon"></div></a>
            <div id="block3" style="display:none;">
              <div id="arrow-up"></div>
              <div id="links1">
                <h1>Menu Three Title</h1>
                  <table>
                    <tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                      </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                    </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                  </table> <!-- Menu -->
              </div><!-- links -->
            </div><!-- tile -->
        </td>
        <td>
        <div id="tile">
            <a href="#" onclick="toggle_visibility('block4');"><div id="icon"></div></a>
            <div id="block4" style="display:none;">
              <div id="arrow-up"></div>
              <div id="links1">
                <h1>Menu Four Title</h1>
                  <table>
                    <tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                      </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                    </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                  </table> <!-- Menu -->
              </div><!-- links -->
            </div><!-- tile --></td>
        <td>
          <div id="tile">
            <a href="#" onclick="toggle_visibility('block5');"><div id="icon"></div></a>
            <div id="block5" style="display:none;">
              <div id="arrow-up"></div>
              <div id="links1">
                <h1>Menu Five Title</h1>
                  <table>
                    <tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                      </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                    </tr><tr>
                      <td>
                        <div id="icon"></div>
                      </td>
                      <td>
                        <div id="icon"></div>
                      </td>
                  </table> <!-- Menu -->
              </div><!-- links -->
            </div><!-- tile -->
        </td>
      </tr>
    </table><!-- menugrid -->
  </div><!-- icons -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacus quam, hendrerit non tempus ac, dictum a elit. Aenean quis leo eu turpis congue tincidunt. Vivamus sagittis semper feugiat. Morbi ullamcorper felis in nibh fringilla efficitur. Maecenas massa justo, malesuada in porttitor ac, faucibus vel velit. Aenean bibendum, ante et tincidunt scelerisque, quam nunc accumsan leo, in fermentum nulla odio vel felis. Duis pulvinar convallis mi, accumsan tincidunt massa commodo eu. Pellentesque eleifend tellus vel leo fermentum, ac vestibulum lorem gravida.</p>

<p>Nam at odio mattis, pharetra nulla eu, feugiat arcu. Phasellus sed eros tristique, venenatis augue ut, gravida dolor. Quisque pharetra bibendum molestie. Phasellus finibus dui non dui cursus, id volutpat turpis accumsan. Donec scelerisque lorem eget varius blandit. Curabitur sit amet erat elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas venenatis purus ac venenatis imperdiet. Phasellus porta eros ut felis interdum, a tempus ante imperdiet. Phasellus nec efficitur felis, sodales viverra nibh. Nullam vulputate mauris lorem, nec pretium erat fringilla quis. Sed ac venenatis erat. Cras hendrerit venenatis accumsan. Aenean ornare dictum justo, at ultrices orci sodales nec. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

<p>Morbi et laoreet velit. Suspendisse libero nunc, sodales a risus quis, eleifend congue elit. Ut dapibus lacinia quam, quis vehicula leo cursus at. Phasellus venenatis ante a urna finibus, vitae posuere tellus eleifend. Sed cursus risus quis efficitur luctus. Fusce ut mi sed risus dignissim pulvinar. Sed et augue id ipsum mollis feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit justo id nulla pharetra, id dapibus ipsum tristique. Duis dictum eros a augue posuere rutrum ac et metus.</p>

<p>Fusce dignissim nunc ut enim scelerisque varius. Pellentesque auctor nisi sollicitudin libero aliquam feugiat. Fusce eget volutpat libero. Nam at finibus tortor. Curabitur vulputate posuere mattis. Nulla vitae semper urna. Nunc blandit, ipsum in scelerisque accumsan, neque lectus aliquet urna, ut rutrum tellus est in nisi. Cras vehicula orci sit amet nulla ultrices porttitor. Nulla at maximus velit. Aenean tempor nec mi a efficitur. Maecenas a pellentesque diam.</p>

<p>Nullam mollis nulla sed magna dapibus interdum. Sed cursus semper eros et rutrum. Duis vitae vehicula ligula. In tempor nisl leo. Duis at aliquam elit, vitae pharetra arcu. Praesent efficitur, sapien nec ornare tristique, sapien dolor elementum lectus, et dictum elit nisl sed augue. Donec suscipit nulla vel viverra aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In in nisl ac magna semper gravida. Vivamus eros mi, bibendum nec ex a, mattis volutpat sapien. In non imperdiet elit. Suspendisse ullamcorper eros rutrum risus pharetra sollicitudin. Vestibulum imperdiet est eu sem egestas, ut auctor ante pharetra.</p>
</div><!-- all -->

Java脚本

function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

Answer 1

您需要在被切换的div上添加position:absolute ，即子div的

Answer 2

好的，只需将您在图块ID中的位置更改为绝对位置即可。 但是，您可能希望将它们散布开更多或子菜单重叠。

Answer 3

无需绝对定位这些项目。

他们之所以跳跃，是因为您的下拉菜单被打开了

width: auto;

为这些菜单项分配静态宽度，您将停止看到任何跳跃。