I've put in a lot of effort and even tried searching on Google, but I'm unable to find a solution to my problem:
To help you understand my issue better, I have created a jsfiddle with my source code: Click here to view my Source Code
Although everything seems to be working fine, the transition effect is not functioning properly in Firefox.
Below is my complete source code that I need to share along with the jsfiddle:
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">Java / Bukkit</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">PHP | MySQL</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Me</a></li>
</ul>
<div class="clear"></div>
</nav>
// CSS below \\ HTML above
nav{
background: #333;
color: #fff;
padding: 5px;
}
nav ul{
padding: 0px;
margin: 0px;
list-style: none;
}
nav ul li{
float:left;
}
nav ul li a{
color: #fff;
background: #585858;
padding: 10px;
margin-right: 5px;
display: block;
text-decoration: none;
border: 1px solid white;
}
nav ul li a.active{
background: #373737;
}
nav ul li a:hover{
color: #333;
background: #fff;
border: 1px solid black;
}
nav ul li ul{
position: absolute;
height: 0px;
overflow: hidden;
}
nav ul li ul li{
float: none;
}
nav ul li:hover ul{
overflow: visible;
}
nav ul li:hover ul li a{
padding: 10px;
}
nav ul li ul li a{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
padding: 0px 10px;
}