Positioning dropdown menu in IE and Firefox

Question

I'm trying to position this dropdown menu. It only works in Chrome, the submenu appear right below the hovered link. But in IE and firefox they all appear at the same place in the bottom left.

http://jsfiddle.net/3HZGB/2/

CSS

 #menu {
    float:right;
    list-style-type: none;
    padding: 0px;
    margin: 36px 130px 0 0;
}

#menu a {
    height:50px;
    font-size:18px;
    font-weight:bold;
    color:black;
    text-decoration:none;
}

#menu a:hover {
    color:#FFF;
    border:#002d56 6px solid;
    background-color:#002d56;
    opacity:0.8;

}

#menu li {
    position:relative;
    display:inline;
    padding:24px 5px 10px 5px;
    margin-left:40px;   
}

#menu li:hover > ul
{
        display: block;
}

#menu li:hover ul  {  
     display: block;
}  

#menu ul li:first-child a:after /*triangulo*/
{
    content: '';
    position: absolute;
    left: 10px;
    top: -15px;
    z-index:99999;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #002d56;

}

/*submenu*/

#menu ul { 
    padding:5px 30px 5px 10px;
    margin-top:12px;
    position:absolute;  
    display:none;
    z-index: 99999;
    float:left;
    /*visual*/
    background-color:#002d56;
    box-shadow: 4px 4px 10px #999;
    border:#002d56 2px solid;
    /*opacity:0.9;*/
    border-radius:10px;
    /*gradiente*/
    background-image: linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
    background-image: -o-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
    background-image: -moz-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
    background-image: -ms-linear-gradient(bottom, rgb(0,72,135) 39%, rgb(0,43,84) 66%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.39, rgb(0,72,135)),
    color-stop(0.66, rgb(0,43,84))
);

}  


#menu ul a
{
    color:#FFF;
    font-size:14px;
    font-weight:400;
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
#menu ul a:hover {
    background-color:transparent;
    border:none;
    display: block;
    font-size:14px;
    font-weight:400;
    text-decoration:underline;
    opacity:1;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
   }



.form
{
    color:#FFF;
    font-size:14px;
    font-weight:400;
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}



.form li:first-child/*triangulo*/
{
    content: '';
    position: absolute;
    left: 10px;
    top: -15px;
    z-index:99999;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #002d56;

}

.forminput {
    margin:8px 0;
    width:100px;
    border:2px solid #919293;
    border-radius:10px; 
    padding:5px;
    /*gradiente*/
    background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2Q2ZDZkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhM2EzYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(214,214,214,1) 70%, rgba(188,188,188,1) 89%, rgba(163,163,163,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(70%,rgba(214,214,214,1)), color-stop(89%,rgba(188,188,188,1)), color-stop(100%,rgba(163,163,163,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(214,214,214,1) 70%,rgba(188,188,188,1) 89%,rgba(163,163,163,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a3a3a3',GradientType=0 ); /* IE6-8 */    
}

*:focus { outline:none; }


.enviar {
    float:right;
    width:50px;
    color:#fff;
    border:2px solid #002d56;
    border-radius:10px; 
    padding:5px;
    /*gradients*/
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* IE10+ */
background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#207cca',GradientType=0 ); /* IE6-8 */
}

.login {
    margin:0 10px 0 0;  
}

.perdadesenha a {
    font-size:9px;
}

/**/

HTML


EMPRESA
Visão geral
História
Escritórios
Trabalhe conosco


SERVIÇOS

Despacho
Transporte Rodoviário
Logística de Líquidos
Frete Internacional
Licenças Polícia/Exército

    
CONTATO
LOGIN


Login

Senha  


Esqueceu a senha?

Roy Sonasish · Accepted Answer

you need to update your css

in "#menu ul " remove the following properties

margin-top:12px;
float:left;

and add

top:56px;
left:0;

here is the updated jsFiddle file.

this will fix drop down issue.

Positioning dropdown menu in IE and Firefox

Answers (1)

Related Questions