css - 需要边框来拉伸(stretch)整个菜单栏，而不仅仅是菜单项

Question

如果您查看 twoguysplayingzelda.com，您会注意到我的菜单上有一个顶部和底部边框，只延伸到最后一个菜单项。我想让这个边框不拉伸(stretch)整个页面，而是从左窗口的左侧拉伸(stretch)到侧边栏的右侧。如果这令人困惑，只需看看东西在左侧和右侧是如何对齐的，希望它会有意义。我的 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; }

Answer 1

边框位于您的 .main-menu > li > a 元素上，您需要将其移除。

然后将边框添加到包含元素，即您的 div.navigation-inner.section-inner，但是您应该添加另一个类来向其添加边框样式，因为您使用 navigation-inner section-inner 在一个地方。