垂直导航问题

我一直在尝试在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;}

来源

2015-05-15 demeter_aurion

这应该照顾悬停的儿童凸显父母和边界问题。

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

来源

2015-05-15 18:22:33

非常感谢！我认为我需要使用儿童选择器，但实际上并没有太多经验。 –

也许这将帮助

.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; 
}

来源

2015-05-15 18:15:30

垂直导航问题

回答

相关问题