Question

我有一个下拉菜单，与Chrome中的预期完全一致。

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

使用javascript激活此下拉列表，点击时添加display:block 有什么想法吗？

我没有使用桌子。

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

Answer 2

左边：#menubar中的0

.menu-container ul.dropdown-menu{left:0}

参考http://jsfiddle.net/aashi/eyJ8e/8/

Answer 3

对于下拉菜单，您可以查看此演示链接：

html部分：

<ul class="menubar">
    <li><a href="#">NEW</a></li>
    <li><a href="#">MENU</a>
        <ul class="dropmenu">
            <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>
    </li>
</ul>

CSS部分：

*{ margin:0; padding:0;}
ul.menubar{
    margin:0 auto;
    width:100%;
    background:#000;
    height:40px;
    display:block;
}
ul.menubar li{
    list-style-type:none;
    display:inline-block;
    float:left;
    position:relative;
}
ul.menubar li a{
    display:block;
    text-decoration:none;
    color:#fff;
    padding:10px;
}
ul.menubar li ul.dropmenu{
    position:absolute;
    width:120px;
    padding:10px 10px 10px 0;
    display:none;
}
ul.menubar li:hover ul.dropmenu{
    display:block;
    top:30px;
}
ul.menubar li:hover ul.dropmenu li{
    background:#222;
    width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
    background:#333;
}

这是JS小提琴：

http://jsfiddle.net/ameysawant/LPdqV/1/

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

3 个答案: