Question

我有一个水平列表，我在其中放置隐藏的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/

enter image description here

Answer 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从大纲更改为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;
}

为“last”类添加以下CSS

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

Answer 2

好吧这不是很漂亮，但它确实有效....基本上设置了边框颜色的背景，然后是一个正确颜色的叠加div。下拉列表div与父菜单成比例。

<强>的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;
}

在li和隐藏的div上的Firefox中的CSS大纲错误

2 个答案: