html - Li和隐藏的div上的Firefox中的CSS轮廓错误

我有一个水平列表，其中放置了隐藏的div，直到将鼠标悬停为止。为了保持尺寸（隐藏的div是菜单的宽度），我正在使用outline: 2px solid black;，这在ie和chrome中有效，它概述了li项，但是在firefox中，它概述了整个ul项，包括隐藏的div。

有谁知道解决方法，或者我对Firefox概述有冲突？

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">
        <a href="#"><img src="..."></a>
    </div>

    <div class="userstatus">
    <a href="#" class="mlogbuttons"><span class="icon-user-add"></span> Create an account</a>
    <a href="#" class="mlogbuttons"><span class="icon-user"></span> Log in</a>
    </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（记住它仅在firefox中存在问题，在ie / chrome中可以正常显示）
http://jsfiddle.net/ww2rkexd/1/

最佳答案

在最后一个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>

然后将menudrop类的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;
  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;
}

并为“ last”类添加以下CSS

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

关于html - Li和隐藏的div上的Firefox中的CSS轮廓错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26349929/