嗨:这些年来我在很多网站上都看到过这个(顶部的水平按钮栏，将鼠标悬停在其中一个主要按钮上时会显示相关子功能的访问按钮)但我不太确定该怎么做.我在这里找到的代码实际上让我在没有任何 javascript 的情况下到达那里，但是每当显示一个子按钮集时，它都会将所有后续页面内容向下推送。我不想要这个。我宁愿在页面内容之上(即覆盖)打开按钮集，而不在其“后面”移动任何内容。
这是一个 fiddle ，展示了我到目前为止所得到的......
<html>
<head>
<style>
body{position:fixed;}
button{ width: 100%; }
button.hidden { display:none;}
button.main {display:block;}
div.buttongroup {display:block; float: left; width: 20%;}
div.buttongroup:hover .hidden {display:block;}
</style>
</head>
<body>
<div class="buttongroup" id="one">
<button class="main">MAIN 1</button>
<button class="hidden">2</button>
<button class="hidden">3</button>
<button class="hidden">4</button>
<button class="hidden">5</button>
</div>
<div class="buttongroup" id="two">
<button class="main">MAIN 2</button>
<button class="hidden">2</button>
<button class="hidden">3</button>
<button class="hidden">4</button>
<button class="hidden">5</button>
</div>
<div class="buttongroup" id="three">
<button class="main">MAIN 3</button>
<button class="hidden">2</button>
<button class="hidden">3</button>
<button class="hidden">4</button>
<button class="hidden">5</button>
</div>
<div style="clear:both;"></div>
<p>Howdy. I am a paragraph or any other page contents (images, background, etc.) that should just REMAIN fixed exactly where they are in the background when the site visitor momentarily hovers over the main button above and the hidden buttonset cascades open.</p>
</body>
</html>
最佳答案
您需要将按钮设置为position: absolute。 这是一个例子:http://jsfiddle.net/Lzd6zraq/1/ 您还可以将它们设置为 position: fixed，这样它们将始终保持在它们的位置，即使您滚动也是如此。
.buttons {position: absolute; width: 100%;}
<div class="buttons">
*buttons*
</div>
关于html - 在悬停时显示垂直按钮集而不移动/按下背景内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27407827/