Html li和hidden div上firefox中的css大纲错误

我有一个水平列表，我在其中放置div，它在悬停之前是隐藏的。为了保持尺寸，隐藏的div是我使用的outline:2px纯黑的菜单的宽度，这适用于ie和chrome，它概述了li项，但在firefox中，它概述了整个ul项，包括隐藏的div

有人知道这方面的解决方法吗？或者我对firefox大纲有冲突吗

css:

html:

JSFIDLE记住它只在firefox中存在一个问题，在ie/chrome中呈现良好

---

在最后一个li项上，添加一个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>

并为最后一个类添加以下CSS

li.last{
  border-right: 2px solid black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

---

好的，这并不漂亮，但它可以工作……基本上设置边框颜色的背景，然后用正确的颜色设置叠加div。下拉div与父菜单保持成比例

jsfiddle：

HTML

---

您好，mate，它确实解决了边框问题，但没有响应，即当我调整窗口大小时，隐藏的div相对于整个菜单稍微收缩。您可以使用边框框作为值向CSS添加框大小：-webkit框大小：边框框-moz框大小：边框框；框大小：边框框；David，在调整窗口大小之前，隐藏的黑色div似乎已经小于菜单的宽度。你想让隐藏的div与菜单的宽度相同吗？嗨，伙计，没有细微的差别是可以的，问题是当屏幕调整大小时，比例会发生变化，虽然不多，但很明显。盒子大小应该可以调整，但比例仍然会改变。但作为一种退路，我可能会将其用作firefox黑客和一些媒体查询：

<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>

#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;
}

li.last{
  border-right: 2px solid black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<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>

#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;
}