我尝试使用复选框下拉样式菜单将所有网站内容存放在一个页面上。基本思想是下拉子菜单将包含与轻型站点的标签（关于，链接等）相关的内容。我只想用CSS实现这一切。
第一个子菜单（ABOUT）很好地显示，但是它后面的子菜单将所有内容与它的相关标签对齐，这显然是有道理的。
但是，我希望实现的效果是每个子菜单的定位占据视口的整个宽度，并始终与屏幕左侧对齐，就像单击ABOUT时一样。
这是我的代码。
https://codepen.io/maxineheadroom/pen/gxPzpE
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: \201C \201D \2018 \2019;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
html input[type=button],
/* 1 */
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body,
figure {
margin: 0;
}
legend,
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
header,
footer,
section {
overflow: hidden;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
}
/*////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/
header {
/* background-color: blue;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;*/
overflow: hidden;
height: 100vh;
max-width: 2000px;
}
.navigation {
background: #161616;
height: 10vh;
display: flex;
align-content: flex-end;
color: white;
}
a {
color: white;
}
.menuNav {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 250px;
color: white;
list-style-type: none;
}
/* shout out to Andrea Tondo for the incredible drop down effect sans JS ===> https://codepen.io/Tont/
Style for the first level menu bar*/
ul#menu {
position: fixed;
top: 0;
width: 100%;
height: 10vh;
margin: 0;
color: #eee;
}
ul {
display: flex;
align-items: flex-end;
}
ul#menu > li {
float: left;
list-style-type: none;
position: relative;
}
label {
position: relative;
padding: 0 18px 0 12px;
cursor: pointer;
}
label:after {
content: "";
position: absolute;
display: block;
top: 50%;
right: 5px;
width: 0;
height: 0;
}
/*hide the inputs*/
input {
display: none;
}
/*show the second level menu of the selected voice*/
input:checked ~ div.submenu {
max-height: 100vh;
transition: max-height 0.8s ease-in;
}
/*style for the second level menu*/
.submenu {
height: 100vh;
}
div.submenu {
max-height: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
background: rgba(0, 0, 0, 0.83);
transition: max-height 0.2s ease-out;
position: absolute;
width: 100vw;
}
div.submenu li a {
display: block;
padding: 12px;
color: #ddd;
text-decoration: none;
box-shadow: 0 -1px rgba(0, 0, 0, .5) inset;
transition: background .3s;
white-space: nowrap;
}
@keyframes delay {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="navigation">
<ul id="menu">
<li class="about">
<input id="check01" type="radio" name="menu" />
<label for="check01">ABOUT</label>
<div class="submenu">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
<li class="link">
<input id="check02" type="radio" name="menu" />
<label for="check02">LINK</label>
<div class="submenu">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
</ul>
</div>
答案 0 :(得分：1)
您的codepen中几乎已经存在，您的子菜单已经在使用position: absolute;，然后只需要left:0;。
然而，您的菜单position:relative;元素上的li阻碍了上述修复。一旦你删除它们，它就可以完美地运行。
这里是adjusted version of your codepen，我更改的代码是：
ul#menu > li{
float:left;
list-style-type:none;
/*position: relative;*/
}
和
div.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background: rgba(0, 0, 0, 0.83);
transition:max-height 0.2s ease-out;
position:absolute;
width:100vw;
left: 0; /*this was added*/
}
这是一个完整的工作示例：
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
*{margin:0; padding:0;
}
header,
footer,
section {
overflow: hidden;
}
html{
font-size: 62.5%;
}
body{
font-size: 1.6rem;
}
img{
max-width: 100%;
display: block;
}
a{
text-decoration: none;
}
/*////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////*/
header{
/* background-color: blue;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;*/
overflow: hidden;
height: 100vh;
max-width: 2000px;
}
.navigation{
background: #161616;
height: 10vh;
display: flex;
align-content: flex-end;
color: white;
}
a{
color: white;
}
.menuNav{
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 250px;
color: white;
list-style-type: none;
}
/* shout out to Andrea Tondo for the incredible drop down effect sans JS ===> https://codepen.io/Tont/
Style for the first level menu bar*/
ul#menu{
position:fixed;
top:0;
width:100%;
height: 10vh;
margin:0;
color:#eee;
}
ul{
display: flex;
align-items: flex-end;
}
ul#menu > li{
float:left;
list-style-type:none;
}
label{
position:relative;
padding:0 18px 0 12px;
cursor:pointer;
}
label:after{
content:"";
position:absolute;
display:block;
top:50%;
right:5px;
width:0;
height:0;
}
/*hide the inputs*/
input{display:none}
/*show the second level menu of the selected voice*/
input:checked ~ div.submenu{
max-height:100vh;
transition:max-height 0.8s ease-in;
}
/*style for the second level menu*/
.submenu{
height: 100vh;
}
div.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background: rgba(0, 0, 0, 0.83);
transition:max-height 0.2s ease-out;
position:absolute;
width:100vw;
left: 0;
}
div.submenu li a{
display:block;
padding:12px;
color:#ddd;
text-decoration:none;
box-shadow:0 -1px rgba(0,0,0,.5) inset;
transition:background .3s;
white-space:nowrap;
}
@keyframes delay{
0%{opacity: 0;}
60%{opacity: 0;}
99%{opacity: 0;}
100%{opacity:1;}
}*/<div class="navigation">
<ul id="menu">
<li class="about">
<input id="check01" type="checkbox" name="menu"/>
<label for="check01">ABOUT</label>
<div class="submenu">
<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
<li class="LINK">
<input id="check02" type="checkbox" name="menu"/>
<label for="check02">LINK</label>
<div class="submenu">
<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nam, autem eligendi tempora non dicta ullam! Deserunt similique cum et impedit dolorem dignissimos necessitatibus ducimus, fuga beatae nemo ipsam quidem.</div>
</div>
</li>
</ul>
</div>