CSS Styling Выпадающего Меню

Question

Как я могу избавиться от горизонтальных границ, которые разделяют каждый пункт меню в соответствии со следующим примером, но поддерживают общую внешнюю границу активного меню:

http://jsfiddle.net/tdJnS/

Что-то вроде этого:

Answer 1

Удалить границу сверху от li -> a.

См DEMO здесь

CSS изменения ниже,

ul#navmenu-h li:hover li a, 
ul#navmenu-h li.iehover li a { 
/*border-top: 1px solid #EEEEEE;*/ <-- Commented 
... 
... 

и

ul#navmenu-h li:hover a, 
ul#navmenu-h li.iehover a 
{ 
/*border-top: 1px solid #EEEEEE;*/ <-- Commented 
... 
... 

Edit:

Он должен работать, если вы добавите границу до ul и удалите margin-left: -1 и margin-top: -1 с li > a.

Также обратите внимание, что удаление маржи даст другое представление о том, что у вас было раньше.

DEMO здесь

/*newly added - Change to any color to #EEEEEE if that is what you want */ 
ul#navmenu-h ul  
{ 
    border: 1px solid black; 
} 

и прокомментированы ниже,

ul#navmenu-h li:hover li a, 
ul#navmenu-h li.iehover li a { 
/*border-top: 1px solid #EEEEEE; 
border-right: 1px solid #EEEEEE; 
border-left: 1px solid #EEEEEE; 
border-bottom: 1px solid #EEEEEE; 
    margin-left: -1px; */ 


ul#navmenu-h li:hover a, 
ul#navmenu-h li.iehover a 
{ 
/*border-top: 1px solid #EEEEEE;*/ 
/*margin-top: -1px;*/ 

Answer 2

Удалить границу верхом из этого:

ul#navmenu-h li.iehover li a { 
border-bottom: 1px solid #EEEEEE; 
border-right: 1px solid #EEEEEE; 
border-left: 1px solid #EEEEEE; 
margin-left: -1px; 

float: none; 
background: #FFF; 
font-weight: normal; 
font-size: 10px; 
}