有没有一种仅 CSS 的方法可以使下拉菜单项的大小与其父菜单项的大小相同？
我一直在 W3 Schools 中进行修改，到目前为止我已经获得了预期的效果，但是导航栏现在随下拉菜单一起扩展。我缺少更好的方法吗？提前对格式表示歉意，并感谢您的宝贵时间。
编辑：希望进一步澄清：示例
W3schools 的链接： https://www.w3schools.com/code/tryit.asp ?filename=GD1ZCKC1TKED
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainNav {
background-color: #000;
padding:12px 10px 0px 0px;
float: right;
overflow: hidden;
}
.mainNav a {
color: #FFF;
float: left;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.mainNav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.mainNav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 500px) {
.logo {
max-width: 25%;
height: auto;
padding-top:10px;
margin-bottom:-50px;
display: block;
margin: auto;
}
.mainNav{
background-color: black;
width:100%;
font-size: 18px;
}
.mainNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
手掌心1回答
-
杨__羊羊
整个导航范围扩大的原因是由于该项目的定位。您已将其.dropdown-content设置为position: relative;通过将其更改为position: absolute;它将解决第一个问题。然而，现在要获得与父级相同的宽度，有几种方法可以做到这一点。最简单的方法就是简单地设置一个width属性dropdown-content，这样它就总是相同的。唯一的问题是，如果您的下拉内容区域较长，则会导致单词被截断。如果是这种情况，您可以使用它min-width来代替。97.45px;我已经根据标签上使用的填充计算了宽度<button>。所以你需要做的就是将你的 css 更改.dropdown-content为：.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; width: 97.45px;}或者，就像我说的min-width: 97.45px;。这将使其与父级保持相同的宽度，同时允许选项随着更大的内容而扩展。
随时随地看视频慕课网APP
相关分类
Html5
