需要边框来拉伸整个菜单栏,而不仅仅是菜单项
问题描述:
如果您签出twoguysplayingzelda.com,您会注意到我的菜单上有一个顶部和底部边框,只能延伸到最后一个菜单项。我想让这个边框不是整个页面,而是从左边窗口的左边到边栏的右边。如果这是令人困惑的,只要看看左边和右边的事情是如何对齐的,希望它是有道理的。我的CSS代码如下。感谢你的帮助!需要边框来拉伸整个菜单栏,而不仅仅是菜单项
div.navigation.section.no-padding.bg-dark { background: #ffffff; }
.main-menu {
font-family: 'Arial', sans-serif;
font-size: 1.0em;
text-align: center;
}
.main-menu li { position: relative; }
.main-menu > li { float: left; }
.main-menu > li:before {
content: none;
display: block;
position: absolute;
right: 0;
top: 50%;
margin-top: -18px;
margin-right: -13px;
}
.main-menu > li:last-child:before { content: none; }
.main-menu > li > a {
display: block;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
font-size: 1.0em;
color: #000000;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
border-bottom: 1px solid #808080; (here is my bottom border)
border-top: 1px solid #808080; (here is my top border)
width: 100%; (I thought this would do the trick but it didn't)
}
.main-menu > li:first-child > a { margin-left: 0; }
.main-menu > .has-children > a,
.main-menu > .page_item_has_children > a { padding-right: 20px; position:
relative; }
.main-menu > .has-children > a::after,
.main-menu > .page_item_has_children > a::after {
content: "";
display: none;
border: 5px solid transparent;
border-top-color: #999;
position: absolute;
z-index: 1001;
right: 29px;
top: 50%;
margin-top: -2px;
}
.main-menu li:hover > a {
cursor: pointer;
background: #01B3D9;
color: #000000; }
.main-menu > .has-children:hover > a::after,
.main-menu > .page_item_has_children:hover > a::after { border-top-color:
#fff; }
答
该边框位于您的.main-menu > li > a
元素上,您需要将其删除。
然后将边框添加到包含元素中,这是您的div.navigation-inner.section-inner
,但您应该添加另一个类以将边框样式添加到该元素,因为您在矿石中使用navigation-inner section-inner
而不是一个地方。
对于div.navigation-inner.section-inner的含义我有点困惑。我没有看到代码中的任何地方,但我猜你是指第一行。我更新了确实让边框贯穿整个页面的编码(见下面),但是当我滚动并且菜单粘到顶部时,边框就会消失。我添加了边框,以便在菜单和内容分开时将菜单分开。感谢帮助! div.navigation.section.no-padding.bg-dark { background:#ffffff; border-bottom:1px solid#808080; border-top:1px solid#808080; } –