當另一個打開時，如何阻止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;

為這些菜單項分配靜態寬度，您將停止看到任何跳躍。