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.
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
<ul id="menu">
<li><a href="#">EMPRESA</a>
<ul><li><a href="visaogeral.html">Visão geral</a></li>
<li><a href="historia.html">História</a></li>
<li><a href="escritorios.html">Escritórios</a></li>
<li><a href="trabalhe.html">Trabalhe conosco</a></li>
</ul>
</li>
<li><a href="#l">SERVIÇOS</a>
<ul>
<li><a href="despacho.html">Despacho</a></li>
<li><a href="transporte_rodoviario.html">Transporte Rodoviário</a></li>
<li><a href="logistica_de_liquidos.html">Logística de Líquidos</a></li>
<li><a href="frete_internacional.html">Frete Internacional</a></li>
<li><a href="licencas.html">Licenças Polícia/Exército</a></li>
</ul>
</li>
<li><a href="contato.html">CONTATO</a></li>
<li><a href="#">LOGIN</a>
<ul class="form"><form>
<li></li>
<li><label class="login">Login</label><input class="forminput" type="text" name="firstname" /><br />
<label>Senha</label> <input class="forminput" type="password" name="firstname" /></li>
<li><input class="enviar" type="submit" value="Entrar" /></li>
</form>
<a href="#"><font size="-6">Esqueceu a senha?</font></a>
</ul>
</li>
</ul>
you need to update your css
in “#menu ul ” remove the following properties
and add
here is the updated jsFiddle file.
this will fix drop down issue.