我正面临一个典型的情况。我正在尝试在CSS中练习下拉菜单。在这里，每当父div .dropdown（绿色）悬停时，就会出现子div .content-small（灰色）。请注意，我已将.max-width属性用于所有div，因为我希望所有div在缩放浏览器窗口时缩小/缩小。
现在，我想要做的是我想增加子div dropdown的最大宽度。但每当我尝试输入50px以上的值时，都没有任何反应。宽度不会增加。
我知道可以通过将max-width替换为width类中的.dropdown来解决此问题。但是，如果我这样做，那么子div dropdown将无法与浏览器窗口一起扩展。所以无论如何，我必须对所有div使用.max-width属性。
我也不想在此阶段使用媒体查询。总的来说，这就是我要找的东西：
我想增加下拉子div .dropdown的宽度，我也希望它与浏览器窗口一起缩放，就像所有其他div一样（max-width）
我不想在这个阶段使用媒体查询，因为我正在尝试用纯CSS练习
我不介意.dropdown div不能保留父.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>
答案 0 :(得分：1)
希望这不会影响您要完成的任务，但是稍微重构您的代码会怎么样：
<强> 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;
}
以下是： 的 UPDATED JS FIDDLE
<强> [编辑]
css select中的+表示在第一个条件之后查找元素。因此，在这种情况下，css会说，当您将鼠标悬停在.content-small上时，它会将.content-small后的元素定位到.dropdown并将css应用于该元素。虽然不是最清楚，但这里有一些documentation on css selectors
[第二次编辑]
我更改了上面的代码，将dropdown包装在一个容器中，然后在container:hover上进行设置，它以同样的方式改变visibility .dropdown，如果你徘徊在任何一个上面，它们会一直存在。我必须引入容器的原因是为它提供.dropdown和.content-small之间的间距 - 您可以看到我使用padding-top:而不是margin-top:，因为{{1}不会使用margin
答案 1 :(得分：0)
当你告诉：width:100%;给一个绝对的孩子时，它需要内部空间并且不会介意边界，为什么它应该溢出 :)？
您可以像使用left一样使用coordonates调整大小，也可以使用right并删除width:100%;
max-width仍然有效，如果您愿意，也可以使用margin:auto。
* {
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: 220px;
/*demo purpose */
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;
max-width: 250px;
height: 50px;
background-color: rgba(214, 214, 214, 1);
position: absolute;
border: 3px solid rgba(255, 0, 0, 1);
top: 47px;
left: -3px;
right: -3px;
margin: auto;
visibility: visible;
}
.wrapper + .wrapper .dropdown {
max-width: 50px;
font-size:0.75em;
}<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">100% + border
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content-small">
Home
<div class="dropdown">tiny
</div>
</div>
</div>
</div>