我正面临一个典型的情况。我正在尝试在CSS中练习下拉菜单。在此，.dropdown每当父div .content-small（绿色）悬停在其上时，子div （灰色）就会出现。请注意，我已将该.max-width属性用于所有div，因为每当浏览器窗口缩放时，我都希望所有div进行缩放。
现在，我要做的是增加子div的最大宽度dropdown。但是，每当我尝试输入大于50px的值时，都不会发生任何事情。宽度不增加。
我知道可以通过max-width仅width在.dropdown类中替换为来解决此问题。但是，如果我这样做，则子divdropdown将不会随浏览器窗口缩放。因此，无论如何，我必须.max-width对所有div使用property。
我也不想在此阶段使用媒体查询。总的来说，这就是我要寻找的：
我想增加下拉子div的宽度.dropdown，也希望像其他所有div一样，将其与浏览器窗口一起缩放（最大宽度）
我不想在此阶段使用媒体查询，因为我正在尝试使用纯CSS
我不在乎.dropdowndiv是否不保留为父级的子级.content-small（如果可能的解决方案需要那种方式）
希望能有一个解决方案。
* {
box-sizing: border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html, body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
}
.content-small:hover .dropdown{
visibility: visible;
}
.dropdown {
box-sizing: border-box;
width: 100%;
max-width: 250px;
height: 50px;
background-color: rgba(214,214,214,1);
position: absolute;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(255,0,0,1);
top: 47px;
left: -3px;
visibility: visible;
}<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown"></div>
</div>
</div>
</div>希望这不会干扰您要完成的工作，但是可以稍微重组一下代码：
的HTML
<div class="wrapper">
<div class="content">
<div class="content-small">Home</div>
<div class="container" style="height:60px;padding-top:10px;">
<div class="dropdown"></div>
</div>
</div>
</div>
的CSS
*{
box-sizing:border-box;
}
a {
color: rgba(0,0,0,1);
text-decoration: none;
}
a:hover {
color: rgba(0,0,255,1);
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(0,0,0,1);
padding: 0px;
}
.wrapper {
height: 600px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
background-color: rgba(204,204,204,1);
margin-right: auto;
position: relative;
padding: 0px;
margin-top: 0px;
}
.content {
position: relative;
box-sizing: border-box;
height: 100%;
max-height: 200px;
max-width: 600px;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
left: 0px;
right: 0px;
font-size: 32px;
text-align: center;
border: 3px solid rgba(0,0,0,1);
border-radius: 15px 15px 0px 0px;
width: 100%;
}
.content-small {
max-width: 100px;
height: 100%;
max-height: 50px;
background-color: rgba(0,255,204,1);
position: relative;
margin-right: auto;
margin-left: auto;
border: 3px solid rgba(0,0,0,1);
top: 5px;
margin-top:10px;
}
.content-small:hover + .container, .container:hover{
visibility: visible;
}
.container{visibility:hidden;display: inline-block;
max-width: 100px;
width: 100%;}
.dropdown {
background-color: rgba(214,214,214,1);
border: 3px solid rgba(255,0,0,1);
max-width: 100px;
height: 100%;
max-height: 50px;
position: relative;
margin-right: auto;
margin-left: auto;
top: 5px;
}
这是：更新的JS FIDDLE
[编辑]
在+CSS中的选择是说找的第一准则后的元素。所以，在这种情况下，CSS是说，当你将鼠标悬停在.content-small，它就会瞄准元素之后.content-small与.dropdown和CSS适用于它。尽管不是最清楚，但这是一些有关CSS选择器的文档的链接
[第二编辑]
我更改了上面的代码以将包裹dropdown在一个容器中，然后对其进行设置，以相同的方式进行container:hover更改，如果将鼠标悬停在任一位置，它都将保持可见状态。我必须引入一个容器的原因是要给它和之间的间距-您可以看到我使用的间距，而不是因为它不会与visibility.dropdown.dropdown.content-smallpadding-top:margin-top:margin:hover
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句