与边框底部

Question

我想包括一个底部边框图像（箭头，159px宽）菜单冲突。 像这样：

但问题是，该<li>不能得到159px的宽度。

有什么招数来表示图像边界，不推其他<li>走呢？

LG cgee

的<li>的代码：

.sub_menu ul li { 
    float: left; 
    font-family: 'Open Sans',sans-serif; 
    font-weight: bold; 
    height: 41px; 
    margin-right: 20px; 
    margin-top: 10px; 
} 

的有源元件的代码：

.sub_menu ul .active { 
    background-image: url("../images/sub_menu_border_active.png"); 
    background-position: center 17px; 
    background-repeat: no-repeat; 
    position: relative; 
    z-index: 100; 
} 

Answer 1

有几种可能为你实现预期结果：

1. 您可以添加min-width: 159px李。
2. 您可以使用position: absolute和bottom: 0在li（例如span）中添加其他元素。您将需要添加overflow: visible到li为好。
3. 下图：

CSS

.sub_menu ul .active { 
    position: relative; 
    z-index: 100; 
    overflow: visible; 
} 

.sub_menu ul .active:after { 
    content: ''; 
    background-image: url("../images/sub_menu_border_active.png"); 
    background-position: center 17px; 
    background-repeat: no-repeat; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -80px; 
    height: ...; 
    width: 159px; 
    z-index: 101; 
}