使用标记创建下拉菜单时遇到问题。我不知道为什么，但下拉菜单根本不起作用/似乎没有注册。当下拉菜单显示时，我希望它也能使下面的内容下拉。有什么帮助吗？
<body>
<div ID = "contents">
<a ID = "menuPage" href = "origami main.html#about">About</a>
<div ID = "dropDown">
<a ID = "dropDownPortfolio">Portfolio</a>
<div ID = "dropDownCnt">
<a ID = "portfolioPortrait" href = "origami main.html#portraits">Portraits</a>
<a ID = "portfolioPortrait" href = "origami main.html#stationary">Stationary Cards</a>
</div>
</div>
<a ID = "menuPage" href = "">Video</a>
<a ID = "menuPage" href = "">Contact</a>
</div>
</body>
<style>
a, #dropDown {
color: #ff80d5;
font-family: Gill Sans, sans-serif;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 25px;
}
#contents{
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
#dropDownCnt{
display: none;
position:absolute;
}
</style>
您需要将悬停状态添加到样式中
a#dropDownPortfolio:hover + #dropDownCnt{
display:block;
}
<style>
a, #dropDown {
color: #ff80d5;
font-family: Gill Sans, sans-serif;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 25px;
}
#contents{
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
#dropDownCnt{
display: none;
}
a#dropDownPortfolio:hover + #dropDownCnt{
display:block;
}
</style><body>
<div ID = "contents">
<a ID = "menuPage" href = "origami main.html#about">About</a>
<div ID = "dropDown">
<a ID = "dropDownPortfolio">Portfolio</a>
<div ID = "dropDownCnt">
<a ID = "portfolioPortrait" href = "origami main.html#portraits">Portraits</a>
<a ID = "portfolioPortrait" href = "origami main.html#stationary">Stationary Cards</a>
</div>
</div>
<a ID = "menuPage" href = "">Video</a>
<a ID = "menuPage" href = "">Contact</a>
</div>
</body>
<style>
a, #dropDown {
color: #ff80d5;
font-family: Gill Sans, sans-serif;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-size: 25px;
}
#contents{
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
#dropDownCnt{
display: none;
position:absolute;
}
</style><body>
<div ID = "contents">
<a ID = "menuPage" href = "origami main.html#about">About</a>
<div ID = "dropDown">
<a ID = "dropDownPortfolio">Portfolio</a>
<div ID = "dropDownCnt">
<a ID = "portfolioPortrait" href = "origami main.html#portraits">Portraits</a>
<a ID = "portfolioPortrait" href = "origami main.html#stationary">Stationary Cards</a>
</div>
</div>
<a ID = "menuPage" href = "">Video</a>
<a ID = "menuPage" href = "">Contact</a>
</div>
</body>
悬停在#dropDown上，然后花费#dropDownCnt
在的末尾添加这个
#dropDownCnt {
max-height: 0px;
overflow: hidden;
visibility: hidden;
transition: all 200ms ease;
}
#dropDown:hover #dropDownCnt{
max-height: 100px;
visibility: visible;
overflow: auto;
}
并删除此
#dropDownCnt{
display: none;
position:absolute;
}