How to display white background overflow on dropdown menu? - css

Question

I have a drop down menu created purely with CSS. I would like to implement an overflow using z-index (i presume) that will bleed over a border on my menu to give the impression that both the link and the dropdown menu are joined.
The drop down works correctly but I need the first menu item to overflow it's white background on to the drop down menu.
If you go to http://cssdesk.com/ztK64 and hover over the first menu link you will see what I am attempting to explain.
This is my code:
CSS
/*Main nav*/
.main_nav_container{
margin: 10px 0 10px 0;
float:right;
}
ul.main_nav{
margin:0;
z-index:1;
postion:absolute;
}
ul.main_nav li{
margin:0;
display:inline-block;
border-top:solid 1px transparent;
border-left:solid 1px transparent;
border-right:solid 1px transparent;
}
ul.main_nav li a{
font-size:13px;
display:block;
font-weight:bold;
height:25px;
line-height:25px;
padding:0 13px;
text-decoration:none;
color:#1122cc;
border:1px solid transparent;
}
ul.main_nav li a:hover{
text-decoration:underline;
}
ul.main_nav li:hover{
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-khtml-border-radius: 4px 4px 0 0;
background: #fff;
}
ul.main_nav li:hover ul{
display:inline;
}
ul.main_nav li ul{
display:none;
z-index:500;
position:absolute;
background: #fff;
margin:0;
padding:0;
border:solid 1px #ccc;
-moz-border-radius: 0 4px 4px 4px;
border-radius: 0 4px 4px 4px;
-webkit-border-radius: 0 4px 4px 4px;
-khtml-border-radius: 0 4px 4px 4px;
}
ul.main_nav li ul li{
display:block;
margin:0;
padding:0;
text-align:left;
}
ul.main_nav li ul li:hover{
text-decoration:underline;
border-top:solid 1px #fff;
border-left:solid 1px #fff;
border-right:solid 1px #fff;
}
ul.main_nav li ul li a{
font-weight:normal;
}
HTML
<div class="main_nav_container">
<ul class="main_nav">
<li>
<a id="hover" href="#">For sale</a>
<ul>
<li>Property for sale</li>
<li>New homes for sale</li>
<li>Find estate agents</li>
</ul>
</li>
<li>To rent</li>
<li>New homes</li>
<li>House prices</li>
<li>Blog</li>
<li>Property advice</li>
<li>Contact</li>
</ul>
</div>

Answer 1

Add the following CSS:
ul.main_nav li:hover a {
border-bottom:1px solid white;
position:relative;
z-index:100;
}
ul.main_nav li:hover ul {
margin-top:-1px;
margin-left:-1px;
z-index:99;
}
You have to have the position:relative; in the a to make the z-index work correctly. The bottom border of the a is to cover up the border of the ul. The margin changes in the ul are to position the borders correctly for the effect of them being connected.