html - 下拉菜单在 Firefox 中的工作方式不同

Question

我有一个下拉菜单，它在 Chrome 中完全符合预期。

下拉列表是绝对位置，父级是相对位置。但是，它在 Firefox 中的呈现方式似乎有所不同。放置的菜单似乎是相对于 ul 元素而不是 li 元素

此下拉菜单使用 javascript 激活，在点击时添加一个 display:block 有什么想法吗？

我没有使用表格。

fiddle http://jsfiddle.net/eyJ8e/1/

HTML

<div id="menubar">
    <div class="container"> 

        <ul class="menu-container title" style="float:left;">
            <li><a href="http://thehubwire.com/radioactive/index.php?module=Products&amp;view=latest">NEW</a>

            </li>
            <li class="dropdown">   <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>

                <ul class="dropdown-menu" style="display:block">    <a href="#"><li>Jeans</li></a>
    <a href="#"><li>Pants</li></a>
    <a href="#"><li>Shirts</li></a>
    <a href="#"><li>Shorts</li></a>
    <a href="#"><li>Tees</li></a>

                </ul>
            </li>

        </ul>
    </div>
</div>

CSS

body
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 10pt;
    /* background-color: #f0f0f0; */
}
.title{
    /*font-family: Impact, Charcoal, sans-serif;*/
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    font-family: SourceSans Pro Bold;
}
.container{
    width:1024px;
    margin:0 auto;
}
a, a:active, a:visited
{
    color: #000000;
    text-decoration: none;
    outline: none;
}
a:hover
{
    text-decoration: none;
}


#menubar {
    width:100%;
    min-width:1000px;
    height:75px;
    background-color:#000;
    line-height: 75px;
    color:white;
}
#menubar .brand{
    display: block;
    height:75px;
    width: 120px;
    margin-right:30px;
    margin-top:3px;
    float:left;
    color:white!important;
}
#menubar .menu-container{
    list-style:none;
    margin:0px;
}
#menubar .menu-container li:first{
    border-left: 1px solid grey;
}
#menubar .menu-container li{
    position:relative;
    display:inline;
    padding:0px 15px;
    font-size: 14px;
    text-transform: uppercase;
    border-right: 1px solid grey;
    height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
    text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
    border-right:none;
    padding-right:0px;
}
#menubar .authentication-fb-form{
    display:inline;
}
#menubar .menu-container li a{
    color: white!important;
}
#menubar .menu-container li:last-child{
    border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
    background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
    border:none;
    position:absolute;
    z-index:1000;
    background-color:black;
    display:none;
    margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
    display:block;
    min-width:150px;
    max-width: 250px;
    height:auto;
}
#menubar .menu-container .dropdown-menu a{
    display:block;
    line-height:25px;
    padding: 5px 0px;
    height:auto;
    border: 2px solid white;
    border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
    border: 2px solid white;
}

ul{
    list-style: none;
    margin:0px;
    padding:0px;
}


.inline-block{
    display: inline-block;
}
.pull-right{
    float:right!important;
}
.caret{
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

Answer 1

这里有几个问题。首先，你在嵌套 <li>在 <a> 内的无效。你需要解决这个问题:

<ul class="dropdown-menu">
    <li><a href="#">Jeans</a></li>
    <li><a href="#">Pants</a></li>
    <li><a href="#">Shirts</a></li>
    <li><a href="#">Shorts</a></li>
    <li><a href="#">Tees</a></li>
</ul>

其次，您实际上并没有给出嵌套的 <ul> FF 似乎需要的左侧位置:

#menubar .menu-container ul.dropdown-menu{ 
    left: 0;
}

然后您还需要将边框从 <a> 移开到 <li>以保持您在进行这些更改之前的样式。

DEMO