Dropdown menu working differently in Firefox

Question

I have a dropdown menu which works exactly as expected in Chrome.

The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element

This dropdown is activated using javascript, adding a display:block on click Any ideas why?

I did not use a table.

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

For a drop down menu you may check this demo link :

The html part:

<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>

the CSS part:

*{ 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;
}

Here is the JS fiddle:

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

Answer 2

There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:

<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>

secondly, you arent actually giving your nested <ul> a left position which FF seems to need:

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

You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.

DEMO

Answer 3

just put left:0 in #menubar

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

refer http://jsfiddle.net/aashi/eyJ8e/8/