(CSS) 테두리가 아닌 메뉴 주위의 이상한 흰색 테두리

방금 첫 번째 다중 레벨 드롭 다운 메뉴를 만들었지 만 두 개의 흰색 테두리에 문제가 있습니다. 첫 번째 흰색 테두리는 a 요소의 패딩과 관련된 것으로 보이는 메뉴의 맨 아래에 있습니다. 아래 스크립트에서 해당 위치를 표시했습니다.(CSS) 테두리가 아닌 메뉴 주위의 이상한 흰색 테두리

둘째 흰색 테두리는 언어가있는 드롭 다운 메뉴 주위에 있습니다. 나는 많은 다른 대안을 실험했지만 지금까지 이러한 문제에 대한 해결책을 찾지 못했습니다. 솔루션에 대한

#menu-1 { 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 999; 
 
    top: 0; 
 
    left: 0; 
 
    box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.4); 
 
} 
 

 
#menu-1 .top-border { 
 
    background-color: rgb(255, 255, 255); 
 
    padding-top: 1px; 
 
} 
 

 
#menu-1 .top-border .logo { 
 
    padding: 12px 15px; 
 
    width: auto; 
 
    height: 62px; 
 
    opacity: 0.8; 
 
} 
 

 
#menu-1 .top-border .contact-info { 
 
    float: right; 
 
    margin-top: 25px; 
 
    margin-right: 12px; 
 
} 
 

 
.main-navigation { 
 
    width: 100%; 
 
    background-image: url(https://www.translation-services-usa.com/images/quote-admin/main_menu_background.gif); 
 
    background-repeat: repeat-x; 
 
    min-height: 35px; 
 
    padding-bottom: 0; 
 
    height: auto; 
 
} 
 

 
.menu-item { 
 
    text-transform: uppercase; 
 
    text-shadow: 0 1px 1px #000; 
 
    font-weight: bolder; 
 
} 
 

 
.main-navigation a { 
 
    font-size: 9.5px; 
 
    letter-spacing: .0625em; 
 
    font-family: Geneva, Arial, Helvetica, sans-serif; 
 
    color: white; 
 
    /* Padding below creates the white border */ 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    border-left: 1px solid #146; 
 
    border-right: 1px solid #024; 
 
} 
 

 
.sub-menu-item a { 
 
    font-size: 11px; 
 
    padding: 10px 13px 10px 13px; 
 
} 
 

 
.right-arrow { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-left-color: transparent; 
 
    border-style: solid; 
 
    border-width: 4px 0 4px 4px; 
 
    border-left-color: #cccccc; 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 13px; 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
li ul { 
 
    display: none; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    padding: 1em; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    color: #fff; 
 
} 
 

 
ul li a:hover { 
 
    background: transparent; 
 
    color: #fff; 
 
    background-color: rgba(0, 0, 0, .25); 
 
} 
 

 
li:hover>ul { 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #035; 
 
} 
 

 
li:hover li { 
 
    float: none; 
 
} 
 

 
.sub-menu-1 a { 
 
    color: #eee; 
 
    border-bottom: 1px solid #041e37; 
 
    border-left: 1px solid #002244; 
 
    border-right: 1px solid #002244; 
 
} 
 

 
.menu-item-2 { 
 
    font-size: 11px!important; 
 
    border-left: none!important; 
 
    border-right: none!important; 
 
    padding-top: 11px!important; 
 
} 
 

 
.main-navigation li ul li { 
 
    border-top: 0; 
 
} 
 

 
ul ul ul { 
 
    left: 100%; 
 
    top: 0; 
 
} 
 

 
ul:before, 
 
ul:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
ul:after { 
 
    clear: both; 
 
}

<div id="menu-1"> 
 

 
    <div class="top-border"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" class="logo" alt="Scandinavia"> 
 

 

 
    <div class="contact-info"> 
 
     <img src="http://pluspng.com/img-png/iso-png-iso-png-1000.png" style="height: 37px; width: auto; padding-right: 10px;" alt="Scandinavia"> 
 
     <img src="http://pluspng.com/img-png/iso-png-iso-png-1000.png" style="height: 37px; width: auto; padding-right: 8px;" alt="Scandinavia"> 
 
     <img src="http://pluspng.com/img-png/iso-png-iso-png-1000.png" style="height: 39px; width: auto;" alt="Scandinavia"> 
 
    </div> 
 

 
    </div> 
 

 
    <ul class="main-navigation"> 
 
    <li><a href="#" class="menu-item">ITEM</a></li> 
 
    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a> 
 
     <ul class="sub-menu-1"> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT <i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT<i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT<i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a> 
 
     <ul class="sub-menu-1"> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a> 
 
     <ul class="sub-menu-1"> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     </ul> 
 
    </li> 
 

 

 

 
    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a> 
 
     <ul class="sub-menu-1"> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT <i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT <i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT <i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT<i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     </ul> 
 
    </li> 
 

 

 

 
    <li><a href="#" class="menu-item">ITEM <i class="fa fa-caret-down"></i></a> 
 
     <ul class="sub-menu-1"> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT <i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#">TEXT<i class="right-arrow"></i></a> 
 
      <ul> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      <li><a href="#">TEXT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     <li class="sub-menu-item"><a href="#">TEXT</a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#" class="menu-item" style="border-right: none;">ITEM</a></li> 
 

 

 

 

 
    <!-- <img src="images/eng.png" /> --> 
 

 

 
    <li style="float: right;"> 
 

 

 
     <a href="#" class="menu-item-2"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="margin-bottom: 0.5px; vertical-align: middle;" /> English</a> 
 

 
     <ul class="sub-menu-1"> 
 
     <li class="sub-menu-item"> 
 
      <!-- Dubbel dropdown --> 
 
      <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a> 
 
      <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a> 
 
      <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a> 
 
      <a href="#"><img src="https://www.translation-services-usa.com/images/main-menu-flag-en.png" style="vertical-align: middle;" /> English</a> 
 
     </li> 
 
     </ul> 
 

 
    </li> 
 
    </ul> 
 
</div>

어떤 아이디어 : 여기

당신은 메뉴를 볼 수 있습니까? 나는 정말로 감사 할 것입니다.

출처

2017-11-02 Lavonen

은'박스 그림자를 삭제 box-shadow에서 와서 : 0 픽셀 3px의 8px -2px rgba' 메뉴-1' – Bhargav

white border 외부 메뉴는 그래서

#menu-1 { 
    position: fixed; 
    width: 100%; 
    z-index: 999; 
    top: 0; 
    left: 0; 
    box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.4); //remove box-shadow 
}

출처

2017-11-02 13:11:09 Bhargav

그래, 나도 알아,하지만 그것은 단지 숨 깁니다'에서 문제, 그것을 해결하지 않습니다. 오른쪽의 언어 메뉴를 보면 흰색 테두리가 그대로 남아 있습니다. – Lavonen

하지만 '언어 메뉴'에 흰색 테두리가 보이지 않았습니다. – Bhargav

(CSS) 테두리가 아닌 메뉴 주위의 이상한 흰색 테두리

답변

관련 문제