Html 如何仅使用CSS的垂直菜单按钮显示特定内容？_Html_Css_Menu

Html 如何仅使用CSS的垂直菜单按钮显示特定内容？

html css menu

Html 如何仅使用CSS的垂直菜单按钮显示特定内容？,html,css,menu,Html,Css,Menu,我试图用特定菜单显示特定的div内容，但我的代码不是这样显示的。供参考所附的屏幕截图。（仅适用于CSS）。我不想使用JS。当我将鼠标悬停在特定菜单上时，将显示所有div内容。而且设计也不好看。这是我的密码： <style> .menu { height: 24%; width: 600px; margin: auto; border: 1px solid RGBA(0, 0, 0, 0.4); font-family: calibri, monospace; }

我试图用特定菜单显示特定的

div

内容，但我的代码不是这样显示的。供参考所附的屏幕截图。（仅适用于CSS）。我不想使用JS。当我将鼠标悬停在特定菜单上时，将显示所有

div

内容。而且设计也不好看。这是我的密码：

<style>
.menu {
  height: 24%;
  width: 600px;
  margin: auto;
  border: 1px solid RGBA(0, 0, 0, 0.4);
  font-family: calibri, monospace;
}
div.menu .button {
padding:5px 0px 5px 0px;
 display:block;
cursor: pointer;
  text-align:center;
  width: 150px;
  height: 50%;
  background: #333;
  border: 1px solid white;
  color: #e7e7e7;
  font-weight: 600;
}
div.menu .button:hover {
padding:5px 0px 5px 0px;
 display:block;
cursor: pointer;
  text-align:center;
  width: 150px;
  height: 50%;
  background: #ff0000;
  border: 1px solid white;
  color: #e7e7e7;
  font-weight: 600;
}

.menu .content {
 position:absolute;
  display:none;
  width: 440px;
  height: 23%;
  margin-left: 155px;
  border: 1px solid #e7e7e7;
  
}
.menu .content:hover {
left:150px;
    top:0px;
   color:black;
  display:block;
  
}

.menu .button:hover:focus:active ~ div.content {
  display: block;
}



html {
  width: 100%;
  height: 100%;
  display: flex;
}

body {
  display: flex;
  margin: auto;
}
</style>

<body>

 <div class="menu">
        <div tabindex="0" class="button">Home</div>
        <div class="content">
            “A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
        </div>
        <div tabindex="0" class="button">Contact</div>
        <div class="content">
            “Contacts added but not one is worthy enough to remain as their priority.”
        </div>
        <div tabindex="0" class="button">About</div>
        <div class="content">
            “To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
        </div>
    </div>

</body>
</html>


.菜单{
身高：24%；
宽度：600px；
保证金：自动；
边框：1px实心RGBA（0,0,0,0.4）；
字体系列：calibri，monospace；
}
分区菜单按钮{
填充：5px0px 5px0px；
显示：块；
光标：指针；
文本对齐：居中；
宽度：150px；
身高：50%；
背景：#333；
边框：1px纯白；
颜色：#e7e7e7；
字号：600；
}
div.menu.按钮：悬停{
填充：5px0px 5px0px；
显示：块；
光标：指针；
文本对齐：居中；
宽度：150px；
身高：50%；
背景：#ff0000；
边框：1px纯白；
颜色：#e7e7e7；
字号：600；
}
.菜单.内容{
位置：绝对位置；
显示：无；
宽度：440px；
身高：23%；
左边距：155px；
边框：1px实心#e7e7e7；
}
.菜单.内容：悬停{
左：150px；
顶部：0px；
颜色：黑色；
显示：块；
}
.菜单.按钮：悬停：焦点：活动~div.content{
显示：块；
}
html{
宽度：100%；
身高：100%；
显示器：flex；
}
身体{
显示器：flex；
保证金：自动；
}
家
“房子是由砖块和横梁组成的。家是由希望和梦想组成的。家是我们故事的起点……”
接触
“增加了联系人，但没有一个值得继续作为他们的优先事项。”
关于
“在一个不断试图让你变得与众不同的世界里，做你自己是最大的成就。”

是我的图像链接。

请尝试此链接

菜单{
身高：24%；
宽度：600px；
保证金：自动；
边框：1px实心RGBA（0,0,0,0.4）；
字体系列：calibri，monospace；
位置：相对位置；
}
分区菜单按钮{
填充：5px0px 5px0px；
显示：块；
光标：指针；
文本对齐：居中；
宽度：150px；
身高：50%；
背景：#333；
边框：1px纯白；
颜色：#e7e7e7；
字号：600；
}
div.menu.按钮：悬停{
填充：5px0px 5px0px；
显示：块；
光标：指针；
文本对齐：居中；
宽度：150px；
身高：50%；
背景：#ff0000；
边框：1px纯白；
颜色：#e7e7e7；
字号：600；
}
.菜单.内容{
位置：绝对位置；
显示：无；
宽度：440px；
不透明度：0；
左边距：155px；
边框：1px实心#e7e7e7；
}
.菜单.按钮：悬停+.内容{
显示：内联块；
不透明度：1；
过渡：显示3s；
排名：0；
}
html{
宽度：100%；
身高：100%；
显示器：flex；
}
身体{
显示器：flex；
保证金：自动；
}


家
“房子是由砖块和横梁组成的。家是由希望和梦想组成的。家是我们故事的起点……”
接触
“增加了联系人，但没有一个值得继续作为他们的优先事项。”
关于
“在一个不断试图让你变得与众不同的世界里，做你自己是最大的成就。”