擺脫子菜單中的邊框底部

我的導航中的活動鏈接有一個border-bottom: 1px solid #424242，但我不想在下拉菜單中有border-bottom。正如您在鼠標懸停下拉菜單時看到的那樣，鏈接跳轉。我一直在嘗試，但我找不到解決方案。可能是我不得不重構HTML。我很困惑！任何幫助？這是我的fiddle。謝謝。擺脫子菜單中的邊框底部

來源

2015-09-19 Labanino

您可以將您的代碼..？ – CodeRomeos

你可以添加一些代碼。如果沒有它，不可能告訴你哪個元素在你的CSS中定位。 –

@ CodeRomeos，@Destination Designs已經做到了！抱歉。 – Labanino

您需要從刪除.top-bar-section ul li a:hover：

.top-bar-section ul li a:hover, .top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button):hover { 
    color: #424242; 
    background-color: #f3f4f6; 
    background: #f3f4f6; 
    border-bottom: 2px solid #424242; 
}

DEMO

編輯：

更好的解決方案是隻在子列表中刪除邊框。

.top-bar-section ul ul a:hover { 
    border-bottom: none; 
}

這是一個可能的解決方案，以應對跳躍：

.top-bar-section > ul > li > a { 
    border-bottom: 2px solid transparent; 
}

DEMO2

來源

2015-09-19 21:38:04 lmgonzalves

他要求有沒有邊框的子菜單，因爲腳本丟失，您無法在他提供的小提琴中看到該子菜單，但它在代碼中。 –

我把它作爲答案發布，因爲他想知道它！ – lmgonzalves

是啊，這是有點不清楚，他的意思是「子菜單」我猜。在他的演示中，你沒有看到孩子UL –

從它的外觀有子菜單項沒有邊框，它會看起來好像這會工作。在你撥弄你不能看到的潛艇，但代碼是有他們如此：

.top-bar-section .has-dropdown li > a { 
    border-bottom: none; 
}

來源

2015-09-19 21:37:35

擺脫子菜單中的邊框底部

回答

相關問題