css outline error in firefox on li и скрытый div

Question

У меня есть горизонтальный список, в котором я помещаю div, которые скрыты, пока не зависнет. Чтобы сохранить размеры (скрытые divs - это ширина меню), я использую 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 есть проблема, делает хорошо в т/хром) http://jsfiddle.net/ww2rkexd/1/

Answer 1

ОК, это не очень, но он работает .... в основном устанавливают фон цвета границы, а затем наложение 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; 
} 

Answer 2

На последнем элементе li добавьте класс "последнего":

<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 для класса menudrop от набросков до границы:

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

И добавьте следующий CSS для "последнего" класса

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