我正在尝试制作 Canvas 外菜单，但遇到了问题。 只有前两个菜单链接以灰黑色背景显示，但我希望所有菜单链接都具有它。其余 5 个菜单链接确实位于菜单内(如您将鼠标悬停在链接上时所见)，但它们具有透明背景。
我将 html 和 css 代码放入 Jsfiddle:https://jsfiddle.net/ghbx6fmn
附言这些代码似乎在 Jsfiddle 上运行良好，但在我的网站上却没有...
/*===== SLIDE MENU ======*/
/*---------- HIDE SELECT CHECKBOX ----------*/
.toggle,
.full-screen-close
{
display: none;
}
.full-screen-close
{
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top:0;
left:0;
}
/*---------- TOGGLE OFF-CANVAS MENU ----------*/
.toggle:checked + .container > .menu-container
{
margin-left: 70%;
}
.toggle:checked + .container > .content .full-screen-close
{
display: block;
background: rgba(0,0,0,.5);
}
.menu
{
padding-top: 24px;
}
.toggle-btn,
.close-btn
{
cursor: pointer;
}
.toggle-btn
{
font-size: 2.25rem;
}
.close-btn
{
float: right;
font-size: 1.5rem;
padding: 1.5rem;
color: #ededed;
}
.menu-container,
.content
{
transition: margin 0.5s ease-in-out;
}
.menu-container
{
background: #2c3e50;
width: 40%;
margin-left: 100%;
float: right;
height: 100%;
position: absolute;
z-index:99;
}
.slide-menu i
{
margin-right: 1rem;
font-size: 1.5rem;
vertical-align: middle;
}
.slide-menu li a
{
color: #fff;
padding: 1.5rem;
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 600;
display: block;
transition: background-color .5s ease-in-out;
}
.slide-menu li a:hover
{
background-color: #34495e;
}
/*===== MEDIA QUERIES ======*/
@media (max-width: 460px) {
.slide-menu li a
{
font-size: 0.875rem;
padding-left: 12px;
}
.slide-menu li i
{
font-size: 16px;
}
}
@media (max-width: 320px){
.slide-menu li i
{
display: none;
}
}<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Off-canvas navigation menu Tutorial" />
<meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
<meta name="author" content="AcasA Programming" />
<link rel="icon" href="../../favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/right-slide.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<body>
<input type="checkbox" id="offcanvas-menu" class="toggle" />
<div class="container">
<aside class="menu-container">
<div class="menu-heading clearfix">
<label for="offcanvas-menu" class="close-btn">
<i class="fa fa-times"></i>
</label>
</div><!--end menu-heading-->
<nav class="slide-menu">
<ul>
<li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
<li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
<li><a href="#"><i class="fa fa-cogs"></i>Testing 4</a></li>
<li><a href="#"><i class="fa fa-star"></i>Testing 5</a></li>
<li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
<li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
</ul>
</nav><!--end slide-menu -->
</aside><!--end menu-container-->
<section class="content">
<label for="offcanvas-menu" class="full-screen-close"></label>
<div class="menu right">
<label for="offcanvas-menu" class="toggle-btn">
<i class="fa fa-bars"></i>
</label>
</div><!--end menu-->
<div class="menu-options clearfix">
<div class="right">
</div>
</div>
<div class="content-body">
</div><!--end content body-->
</section><!--end content-->
</div> <!--end container -->
</body>
</html>最佳答案
注意:我对您的 HTML/CSS 结构不满意，认为它可以使用重构。我的回答将解决您遇到的问题，但您的目标应该是进一步简化您的代码。
问题 1:您的菜单不会增加灰色背景的高度，因为菜单是绝对定位的元素，因此在 document flow 之外。 .
确保灰色背景填充整个视口(viewport)的最简单方法是:
.full-screen-close {
...
p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
position: fixed;
}
问题 2:现在我们已经解决了第一个问题，我们看到菜单后面的蓝色背景没有一直延伸。
没问题。让我们删除高度属性。
.menu-container {
...
h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
}
现在，.menu-container 是它需要的高度，而不是父级高度的 100%。
关于css - 完整的 Canvas 外菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37230238/