子菜单的全宽背景，但保留位置
子菜单的全宽背景，但保留位置
提问于 2020-05-06 08:04:23
我的问题很简单，但我找不到任何有效的解决方案。我只想让我的子菜单背景(在我的例子中是黄色的)全宽。我知道我在包装器中放置了相对位置，因为这就是我想要的。(我希望子菜单在徽标下面开始)。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
Stack Overflow用户
发布于 2020-05-06 08:20:32
为了巧妙地做到这一点，您可能需要将nav-bar重新构造为更多已定义的组件。
然而，一个快速的解决方案是：
#main-nav ul.sub-menu {
position: absolute;
left: 0;
right: 0;
background-color: yellow;
width: 125%;
margin-left: -12.5%;
padding-left: 12.5%;
}
请注意，以上值仅适用于您指定的尺寸。如果要更改其中任何一个，还必须修改子菜单样式中的值。
编辑
另一种方法是完全删除包装器div，并且只依赖于需要居中的元素的边距和填充。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.logo {
margin-left: 10%;
}
.left-menu {
margin-right: 10%;
}
#main-nav {
width: 100%;
background-color: #EEE;
}
#main-nav ul {
display: flex;
}
#main-nav {
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;
padding-left: 10%;
}
如果这对您也不起作用，那么您可能必须使用JavaScript将子列表注入到包装器不包含的另一个容器中。
Stack Overflow用户
发布于 2020-05-06 08:31:41
您必须用<div class="sub-menu-wrap">包装<ul class="sub-menu">，并添加以下样式：
.sub-menu-wrap {
position: fixed;
width: 100%;
left: 0;
background-color: yellow;
}并更改.sub-menu to的样式
#main-nav ul.sub-menu {
width: 80%;
margin: 0 auto;
}Stack Overflow用户
发布于 2020-05-06 08:18:35
我在你的最终条目中添加了3行。将宽度扩展到整个视口，然后必须补偿它，从左边缘-左-60px开始60像素，将黄色移到页面边缘，然后60px填充，使文本从您想要的位置开始。当我在那里的时候，jsfiddle看起来很好。
#main-nav ul.sub-menu {
position: absolute;
left: 0;
right: 0;
background-color: yellow;
padding-left: 60px;
margin-left: -60px;
width: 100vw;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61625114
复制相关文章
相似问题
腾讯云开发者
