我的问题确实很简单，但是我找不到任何有效的解决方案。我只想使子菜单背景（在我的情况下为黄色）全角。我知道我要在包装纸中放置相对位置，因为这就是我想要的。（我希望子菜单在徽标下方开始。） JSFIDDLE
我想要的结果-用图像说明：IMAGE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation</title>
</head>
<body>
<nav id="main-nav">
<div class="wrapper">
<h1 class="logo">Site Name</h1>
<ul class="main-menu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
<ul class="sub-menu">
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<ul class="left-menu">
<li>Don't mind me.</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
max-width: 1000px;
width: 80%;
margin: 0 auto;
}
#main-nav {
width: 100%;
background-color: #EEE;
}
#main-nav ul {
display: flex;
}
#main-nav .wrapper {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
#main-nav ul.main-menu {
flex: 1;
margin-left: 40px;
}
#main-nav ul.main-menu a {
height: 50px;
display: flex;
align-items: center;
}
#main-nav ul.main-menu a:hover {
background: #000;
color: #FFF;
}
#main-nav ul.sub-menu {
position: absolute;
left: 0;
right: 0;
background-color: yellow;
}
我在您的最终输入中添加了3行。将宽度扩大到整个视口，然后必须从左开始以60像素进行补偿-从左边距为-60px将黄色移至页面边缘，然后以60px的填充以使文本从您想要的位置开始。当我在那里时，在jsfiddle上看起来不错。
#main-nav ul.sub-menu {
position: absolute;
left: 0;
right: 0;
background-color: yellow;
padding-left: 60px;
margin-left: -60px;
width: 100vw;
}