我希望图标不会移动，但会加载带有更多图标的子菜单。但是，使用我当前的代码，主菜单在菜单打开时跳跃。我相信我的问题出在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 -->
的Javascript
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
答案 0 :(得分：0)
您需要将position:absolute添加到正在切换的div，即子div的
答案 1 :(得分：0)
好的，只需将您在瓷砖ID中的位置更改为绝对。但是，您可能希望将它们展开更多或子菜单重叠。
答案 2 :(得分：0)
没有必要绝对定位这些项目。
他们正在跳跃，因为您的下拉列表被打开的容器有
width: auto;
为这些菜单项指定静态宽度，您将不再看到任何跳跃。