css outline error in firefox on li and hidden div - html

Question

I have a horizontal list in which i am placing div's which are hidden until hovered over. To keep the dimensions (the hidden divs are the width of the menu) i am using outline: 2px solid black; , this works in ie and chrome, it outlines the li item but in firefox it outlines the entire ul item including the hidden div.
Does anyone know of a workaround for this or do i have a conflict for firefox outline?
css:
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: white;
outline: 2px solid black;
}
#marketmenu ul li div {
position: absolute;
display: block;
top: 98%;
width: 600%;
background: #ffffff;
height: 200px;
opacity: 0;
visibility: hidden;
overflow: hidden;
z-index: 9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-radius: 0 0 3px 3px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
html:
<div class="mheader-container">
<div id="logo" class="clearfix">
<img src="...">
</div>
<div class="userstatus">
<span class="icon-user-add"></span> Create an account
<span class="icon-user"></span> Log in
</div>
</div>
<div id="market_navigation" class="market_navigation clearfix">
<div id="marketmenu">
<ul>
<li>one<div class="menudrop"></div></li>
<li>two<div class="menudrop"></div></li>
<li>three<div class="menudrop"></div></li>
<li>four<div class="menudrop"></div></li>
<li>five<div class="menudrop"></div></li>
<li>six<div class="menudrop"></div></li>
</ul>
</div>
</div>
jsfiddle (remember its only in firefox there is a issue, renders fine in ie/chrome)
http://jsfiddle.net/ww2rkexd/1/

Answer 1

On the last li item, add a class of "last":
<ul>
<li>one<div class="menudrop"></div></li>
<li>two<div class="menudrop"></div></li>
<li>three<div class="menudrop"></div></li>
<li>four<div class="menudrop"></div></li>
<li>five<div class="menudrop"></div></li>
<li class="last">six<div class="menudrop"></div></li>
</ul>
Then change the CSS for the menudrop class from outline to border:
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: white;
border-left: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And add the following CSS for the "last" class
li.last{
border-right: 2px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 2

ok this isnt pretty but it works....basically set a background of the border color and then a overlay div with the correct color. The dropdown div remains in proportion to the parent menu.
jsfiddle:
http://jsfiddle.net/dheffernan/pas1fqcp/
HTML
<div id="market_navigation" class="market_navigation clearfix">
<div id="marketmenu">
<ul>
<li><span class="innerli leftish">1st<div class="menudrop"></div></span></li>
<li><span class="innerli">2nd<div class="menudrop"></div></span></li>
<li><span class="innerli">3rd<div class="menudrop"></div></span></li>
<li><span class="innerli">4th<div class="menudrop"></div></span></li>
<li><span class="innerli">5th<div class="menudrop"></div></span></li>
<li><span class="innerli rightish">6th<div class="menudrop last"></div></span></li>
</ul>
</div>
</div>
css
#marketmenu ul{
cursor: pointer;
}
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: black;
/*
outline: 2px solid black;
*/
}
.innerli{
display: block;
overflow: auto;
height: 88%;
width: 98%;
margin: 1%;
margin-left: 2%;
background-color: white;
padding-top: 6%;
}
.leftish{
margin-left: 2.5%;
}
.rightish{
width: 96%;
}
#marketmenu ul li div {
position: absolute;
display: block;
top: 98%;
width: 596.5%;
background: #ffffff;
height: 200px;
opacity: 0;
background: black;
visibility: hidden;
overflow: hidden;
z-index: 9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-radius: 0 0 3px 3px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
#marketmenu ul li:first-child div {
}
#marketmenu ul li:nth-child(2) div {
margin-left: -100%;
}
#marketmenu ul li:nth-child(3) div {
margin-left: -200%;
}
#marketmenu ul li:nth-child(4) div {
margin-left: -300%;
}
#marketmenu ul li:nth-child(5) div {
margin-left: -400%;
}
#marketmenu ul li:nth-child(6) div {
margin-left: -500%;
padding-top: 2px;
}
#marketmenu ul li:hover div {
opacity: 1;
visibility: visible;
overflow: visible;
}
.market_navigation{
position: relative;
z-index: 40;
width: 70%;
margin-left: 30%;
height: 40px;
background: white;
}