CSS "absolutely" positioned border-image - hover

Question

I have a CSS design problem for a day and a halve now and it is driving me nuts. I have an horizontal navigation bar with a single unordered list inside. Each list item contains an anchor (or hyperlink) to a page within the website, the CSS is as follows:
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;
}
And the HTML:
<nav id="main">
<ul>
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</nav>
<div id="contentArea">
<!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>
This works all like it should work.
However what i am trying to accomplish is that the border image is displayed outside the nav bar and that it doesn't push the contentArea downwards a 25px. Any ideas?
I also tried to absolute position a block with a.hover::after. This works beautifully, however the width of the block cannot be set equal to a. Perhaps any ideas on this one too?

Answer 1

You need to clear your floated elements using a clear rather than overflow:visible
If you do this you can use your absolute positioning to create the border:
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
I have noticed that the border image thing doesn't work in firefox or ie so this will give you the same effect and is more browser friendly:
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