Перекрытие границы в раскрывающемся меню

Question

Я пытаюсь поместить черную рамку ниже выпадающего меню, а затем «выбранную» страницу, на которой в настоящее время подчеркивается страница «Главная страница» с оранжевой рамкой. Я пытаюсь пересечь оранжевую границу на черной границе.

http://jsfiddle.net/46z5su4u/

Отредактировано Некоторые люди, кажется, смущен, я хочу поставить оранжевую линию поверх черной линии. http://jsfiddle.net/46z5su4u/2/

Рекомендации:

HTML:

<h1>Drop Down Menu</h1> 
<header> 
<nav id="primary_nav_wrap"> 
<ul> 
    <li class="current-menu-item"><a href="#">Home</a></li> 
    <li><a href="#">Menu 1</a> 
    <ul> 
     <li><a href="#">Sub Menu 1</a></li> 
     <li><a href="#">Sub Menu 2</a></li> 
     <li><a href="#">Sub Menu 3</a></li> 
     <li><a href="#">Sub Menu 4</a> 
     </li> 
     <li><a href="#">Sub Menu 5</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Menu 2</a> 
    <ul> 
     <li><a href="#">Sub Menu 1</a></li> 
     <li><a href="#">Sub Menu 2</a></li> 
     <li><a href="#">Sub Menu 3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 
    <ul> 
     <li class="dir"><a href="#">Sub Menu 1</a></li> 
     <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> 
     </li> 
     <li><a href="#">Sub Menu 3</a></li> 
     <li><a href="#">Sub Menu 4</a></li> 
     <li><a href="#">Sub Menu 5</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Menu 4</a></li> 
    <li><a href="#">Menu 5</a></li> 
    <li><a href="#">Menu 6</a></li> 
    <li><a href="#">Contact Us</a></li> 
</ul> 
</nav> 
</header> 

CSS:

header 
{ 
    border-bottom:4px solid #3a3a3a; 
} 

#primary_nav_wrap 
{ 
    margin-top:15px; 
    margin-bottom:-4px; 
    position:relative; 
} 

#primary_nav_wrap ul 
{ 
    list-style:none; 
    float:left; 
    margin:0; 
    padding:0; 
} 

#primary_nav_wrap ul a 
{ 
    display:block; 
    text-decoration:none; 
    line-height:32px; 
    padding:0 15px; 
    font-family:"Open Sans","Lucida Grande",Tahoma,"Trebuchet MS",Verdana,Arial,sans-serif; 
    font-size:1.1em; 
} 

#primary_nav_wrap ul li 
{ 
    position:relative; 
    float:left; 
    margin:0; 
    padding:0; 
} 

#primary_nav_wrap ul li.current-menu-item 
{ 
    border-bottom:4px solid #ff7500; 
    font-weight:700; 
} 

#primary_nav_wrap ul li.current-menu-item a 
{ 
    color:#333; 
} 

#primary_nav_wrap ul li a:hover 
{ 
    color: #ff7500; 
} 

#primary_nav_wrap ul ul 
{ 
    display:none; 
    position:absolute; 
    top:100%; 
    left:0; 
    background:#f8f8f8; 
    padding: 0 12px; 
    box-shadow: 0 2px 2px #ccc; 
} 

#primary_nav_wrap ul ul li 
{ 
    float:none; 
    width:150px; 
    border-bottom: solid 1px #f2f2f2; 
    border-top: solid 1px #fff; 
} 

#primary_nav_wrap ul ul li:after 
{ 
    content: ""; 
} 

nav ul ul li:last-child a 
{ 
    border-bottom: none; 
} 

nav ul ul li:first-child a 
{ 
    border-top: none; 
} 

#primary_nav_wrap ul ul a 
{ 
    line-height:120%; 
    padding:10px 6px; 
} 

#primary_nav_wrap ul li:hover > ul 
{ 
    display:block; 
} 

Answer 1

вам может понадобиться более низкую границу при перемещении?

#primary_nav_wrap ul li a:hover 
{ 
    color: #ff7500; 
    border-top: 4px solid #ff7500;/*add*/ 
} 

Answer 2

Попробуйте http://jsfiddle.net/46z5su4u/1/

все это я добавил

#primary_nav_wrap ul li ul li { 
border-bottom:1px solid orange; 
} 

Answer 3

Fixed http://codepen.io/anon/pen/bfgvo

Добавлена ​​HTML

<div class="clearBoth"></div> 
<div id="top_blackline"></div> 

Добавлено в CSS

.clearBoth 
{ 
    clear:both; 
} 

#top_blackline 
{ 
    margin-top:-4px; 
    width: 100%; 
    border-bottom:4px solid #3a3a3a; 
} 

Answer 4

Просто установите темную границу на первом уровне <li>s вместо <header>.
Так обновленный css код будет выглядеть следующим образом:

header { 
    position: absolute; /* removed border */ 
} 

/* add the following rule */ 

#primary_nav_wrap > ul > li { 
    border-bottom:4px solid #3a3a3a; 
} 

который устанавливает темную границу на первом уровне <li>s только с помощью прямого выбора детского >, больше на этом селекторе here.

Предварительный код вышеуказанного кода here.