垂直導航問題

我一直在嘗試在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

垂直導航問題

回答

相關問題