下拉菜單不工作使用剪輯路徑的css

Question

我正在對角線側的導航欄上，所以我使用剪輯路徑，但我的下拉菜單不起作用。我該如何解決它。

謝謝。

示例代碼

https://www.bootply.com/HBn3AUWrKQ

Answer 1

相反裁剪整個導航欄可以添加一個僞構件三角形是絕對定位成其模擬角度的邊欄中的左邊的。這將是更好的維護選擇。爲角度樣式添加一個新類也是一個很好的建議。只是刪除剪輯路徑的風格和這個CSS添加到.navbar：

.navbar-width-angle::before { 
    /* dimensions and position */ 
    content: ""; 
    left: -1px; /* remove overlapping of orange-bg */ 
    width: 0; 
    height: 0; 
    position: absolute; 

    /* styles for the triangle */ 
    border-style: solid; 
    border-width: 50px 50px 0 0; 
    border-color: #ffffff transparent transparent transparent; 
} 

我用這個工具，CSS三角形：http://triangle.designyourcode.io/