需要邊框來拉伸整個菜單欄，而不僅僅是菜單項

Question

如果您簽出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; } 

Answer 1

該邊框位於您的.main-menu > li > a元素上，您需要將其刪除。

然後將邊框添加到包含元素中，這是您的div.navigation-inner.section-inner，但您應該添加另一個類以將邊框樣式添加到該元素，因爲您在礦石中使用navigation-inner section-inner而不是一個地方。