CSS「絕對」定位邊框圖像

Question

我有一天的CSS設計問題，現在減半了，這讓我瘋狂。我有一個單一的無序列表裏面的水平導航欄。每個列表項包含一個錨點（或超鏈接）到一個頁面的網站內，將CSS如下：

nav#main{ 
    background:#000; 
    width:100%; 
    overflow:auto; 
} 
nav#main ul{ 
    list-style:none; 
} 
nav#main li{ 
    float:left; 
    display: block; 
    overflow:auto; 
} 
nav#main a{ 
    display:block; 
    padding:1em; 
    color:#FFF; 
    text-transform:uppercase; 
    font-size:1.6em; 
} 
nav#main a:hover{ 
    background:#EF7E05; 
    background-clip:padding-box; 
    border-width:0 0 15px 0; 
    border-image: 
     url('../images/nav.png') 
     0 
     0 
     25 
     stretch; 
} 

和HTML：

<nav id="main"> 
    <ul> 
     <li><a href="#">Link text</a></li> 
     <li><a href="#">Link text</a></li> 
     <li><a href="#">Link text</a></li> 
    </ul> 
</nav> 
<div id="contentArea"> 
    <!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. --> 
</div> 

這工作都像它應該工作。

但是我想要完成的是，邊框圖像顯示在導航欄外，並且它不會將contentArea向下推到25像素。有任何想法嗎？

我也嘗試用a.hover :: after來絕對定位一個塊。這工作得很好，但是塊的寬度不能等於a。也許這個的任何想法呢？

Answer 1

你需要使用一個清晰​​明確的浮動元素，而不是overflow:visible

如果你這樣做，你可以用你的絕對定位來創建邊界：

nav#main{ 
    background:#000; 
    width:100%; 
} 
nav#main:after { 
    content:''; 
    display:block; 
    clear:both; 
} 
nav#main ul{ 
    list-style:none; 
} 
nav#main li{ 
    float:left; 
    display: block; 
    overflow:visible; 
} 
nav#main a{ 
    display:block; 
    padding:1em; 
    color:#FFF; 
    text-transform:uppercase; 
    font-size:1.6em; 
    position:relative; 
    overflow:visible; 
} 
nav#main a:hover{ 
    background:#EF7E05; 
} 
nav#main a:hover:after{ 
    background-clip:padding-box; 
    content:''; 
    position:absolute; 
    top:100%; 
    left:0; 
    right:0; 
    border-width:0 0 15px 0; 
    border-image: 
     url('../images/nav.png') 
     0 
     0 
     25 
     stretch; 
} 

Example

我有注意到邊框圖像的東西在Firefox或ie中不起作用，所以這會給你帶來相同的效果，並且更加瀏覽器友好：

nav#main a:hover:after{ 
    background-clip:padding-box; 
    content:''; 
    position:absolute; 
    top:100%; 
    left:0; 
    right:0; 
    height:15px; 
    background: url('../images/nav.png') left top no-repeat; 
    background-size: 100% 15px; 
} 

Example