Проблемы с вертикальной навигацией

Question

Я пытаюсь создать вертикальное навигационное меню в Wordpress для того, что кажется эонами. Кажется, я могу заставить одну часть работать, но потом она вызывает проблемы для другой части. В настоящее время у меня проблема с нижним элементом, показывающим границу, и при зависании он выделяет родительский элемент вместе с тем, который вы наводите. Я знаю, ПОЧЕМУ это происходит, я просто не понимаю, как исправить это, не испортив границы или границы границы.

Я пробовал много вариантов CSS, и ничто, кажется, не дает желаемого результата. Если бы кто-нибудь мог указать мне в правильном направлении, я был бы признателен.

subnav можно посмотреть здесь: http://compadv.dpdev.net/services/corporate-governance

Вот текущий CSS:

#subnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0; 
} 
.sub-nav-menu { 
margin-bottom: -1px;} 

.sub-nav-menu li { 
    background: #85974f; 
    } 


.sub-nav-menu li a { 

border-bottom: 1px solid #717f43; 
    padding: 15px 15px; 
    font-weight: bold; 
text-transform: uppercase; 
    font-size: 14px; 
    font-family: 'Droid Sans', Arial, Helvetica, serif; 
    display: block; 
    color: #fff; 

} 
.sub-nav-menu li:hover { 
    background: #7f8c50; 

} 


.sub-nav-menu a:hover { text-decoration: none;} 
.sub-nav-menu .current_page_item {background: #7f8c50;} 

.sub-nav-menu li:first-child { 
-webkit-border-top-left-radius: 5px; 
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px; 
-moz-border-radius-topright: 5px; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
} 

.sub-nav-menu li:last-child { 
-webkit-border-bottom-right-radius: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-moz-border-radius-bottomright: 5px; 
-moz-border-radius-bottomleft: 5px; 
border-bottom-right-radius: 5px; 
border-bottom-left-radius: 5px; 
} 


#subnav a:active {text-decoration: none; } 
#subnav .children {padding: 0; list-style-type: none; } 
#subnav .children li a {padding-left: 30px; font-size: 13px;} 

Answer 1

Это должно заботиться о зависании на ребенка подсветки родительский и пограничный вопросы.

CSS:

#subnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 5px 0; 
} 
.sub-nav-menu { 
    margin-bottom: -1px; 
} 
.sub-nav-menu li { 
    background: #85974f; 
} 
.sub-nav-menu li a { 
    border-bottom: 1px solid #717f43; 
    padding: 15px 15px; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-family:'Droid Sans', Arial, Helvetica, serif; 
    display: block; 
    color: #fff; 
} 
.sub-nav-menu li a:hover { 
    background: #7f8c50; 
} 
.sub-nav-menu a:hover { 
    text-decoration: none; 
} 
.sub-nav-menu .current_page_item { 
    background: #7f8c50; 
} 
.sub-nav-menu li:first-child, .sub-nav-menu li:first-child a { 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
} 
.sub-nav-menu li:last-child, .sub-nav-menu li:last-child a { 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 

.sub-nav-menu > li:last-child > a { 
    border-bottom: none; 
} 

#subnav a:active { 
    text-decoration: none; 
} 
#subnav .children { 
    padding: 0; 
    list-style-type: none; 
} 
#subnav .children li a { 
    padding-left: 30px; 
    font-size: 13px; 
} 

DEMO:JSFiddle

Answer 2

может быть, это поможет

.sub-nav-menu li:last-child, 
.sub-nav-menu li:last-child > a { 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
}