CSS transition not working but property change is working - html

Question

I am currently developing a css for a website I will publish soon ,I took so much time in the navigation bar, I am trying to make a navigation bar without using images and make it fit into users screen, and after I done it, I have a problem, I want the sub list items to drop down smothley in 2 seconds instead of poping directly
this is the CSS and the HTML
I done the transition property in .nav ul li ul li and want it to change after 2 seconds in .nav ul li:hover ul li
be gentle on me, this is my first website that I am developing from scratch :)
#charset "utf-8";
body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 100%;
}
.pageHeader {
position: relative;
display: block;
width: 960px;
padding: 0px;
/* [disabled]margin-top: auto;
*/
margin-right: auto;
margin-left: auto;
/* [disabled]margin-bottom: auto;
*/
float: none;
}
.pageHeader a {
text-decoration: none;
font-size: 1.4em;
position: absolute;
float: right;
bottom: 50px;
}
.homeContent {
position: relative;
display: block;
top: 105px;
background: none repeat scroll 0% 0% #FFF;
padding: 0px;
margin: 0px auto;
width: 960px;
background-color: green;
z-index: -1;
}
/* Navigation */
/* the nav div blue background color and cyan border top */
.nav {
width: 100%;
height: 50px;
max-height:50px;
border-top: 4px solid rgb(0,160,170);
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30,87,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
}
.nav ul {
width: 960px;
margin: 0px auto;
border: 0px;
padding: 0px;
}
.nav ul li {
margin: 0px;
border-left: 1px solid gray;
padding: 0px;
float: left;
position: relative;
list-style: none;
font-family: amatic-sc;
}
.nav ul li:first-child {
border-left: 0px;
}
/* buttons/ links */
.nav ul li a {
height: 20px;
border: 0px;
margin: 0px;
padding: 15px;
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
text-shadow: 0 1px 1px rgba(251,251,251, .3);
}
.nav ul li a:hover {
background: rgb(20,155,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(20,155,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#149b99', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
color: #fff;
}
.nav ul li a:active {
color: #D1D1D1;
}
/* Nav 2nd level*/
.nav ul li ul {
display: none;
margin: 0;
padding: 0;
width: 100px;
position: absolute;
top: 50px;
left: 2px;
background-color: rgba(255,255,255,0.80);
border-left: 1px solid rgb(0,160,170);
border-right: 1px solid rgb(0,160,170);
border-bottom: 1px solid rgb(0,160,170);
}
.nav ul li ul li {
float: none;
margin: 0px;
padding: 0px;
font-size: 0.8em;
border: 0px;
font-color: black;
max-height: 0px;
-webkit-transition: max-height 2s ease 0s;
-o-transition: max-height 2s ease 0s;
-moz-transition: max-height 2s ease 0s;
-ms-transition: max-height 2s ease 0s;
transition: max-height 2s ease 0s;
}
.nav ul li ul li a {
height: 15px;
border: 0px;
margin: 0px;
padding: 5px;
color: #000000;
text-decoration: none;
display: block;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
z-index: 100;
}
.nav ul li:hover ul {
display:block;
}
.nav ul li:hover ul li{
max-height:999px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style_screen.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainPaegHeader" class="pageHeader"><img src="img/logo.gif" width="318" height="106" alt=""/>
العربية
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Second Link
<ul>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
</ul>
</li>
<li>Third Link
<ul>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
<li>sub Link</li>
</ul>
</li>
<li>More links</li>
<li>More links</li>
<li>More links</li>
<li>More links</li>
</ul>
</div>
<div class="homeContent" id="pageContent">Content for class "homeContent" id "pageContent" Goes Here</div>
<p> </p>
</body>
</html>

Answer 1

Thank you all for the help and effort
it was small simple mistake mentioned by skube
I was using display with transition and that is invaild, it disables animation
so I used visible property with transition instead
visibility: hidden;
visibility: visible;
I changed some css properties in order for that to work, here is the css file after the fixes
#charset "utf-8";
body {
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 100%;
}
.pageHeader {
position: relative;
display: block;
width: 960px;
padding: 0px;
/* [disabled]margin-top: auto;
*/
margin-right: auto;
margin-left: auto;
/* [disabled]margin-bottom: auto;
*/
float: none;
}
.pageHeader a {
text-decoration: none;
font-size: 1.4em;
position: absolute;
float: right;
bottom: 50px;
}
.homeContent {
position:relative;
background: none repeat scroll 0% 0% #FFF;
padding: 0px;
margin: 0px auto;
width: 960px;
background-color: green;
z-index: -1;
}
/* Navigation */
/* the nav div blue background color and cyan border top */
.nav {
width: 100%;
height: 50px;
max-height:50px;
border-top: 4px solid rgb(0,160,170);
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30,87,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
}
.nav ul {
width: 960px;
margin: 0px auto;
border: 0px;
padding: 0px;
}
.nav ul li {
margin: 0px;
border-left: 1px solid gray;
padding: 0px;
float: left;
position: relative;
list-style: none;
font-family: amatic-sc;
}
.nav ul li:first-child {
border-left: 0px;
}
/* buttons/ links */
.nav ul li a {
height: 20px;
border: 0px;
margin: 0px;
padding: 15px;
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
text-shadow: 0 1px 1px rgba(251,251,251, .3);
}
.nav ul li a:hover {
background: rgb(20,155,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(20,155,153,1)), color-stop(99%, rgba(0,110,201,1)), color-stop(100%, rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(20,155,153,1) 0%, rgba(0,110,201,1) 99%, rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#149b99', endColorstr='#7db9e8', GradientType=0 ); /* IE6-8 */
color: #fff;
}
.nav ul li a:active {
color: #D1D1D1;
}
/* Nav 2nd level*/
.nav ul li ul {
visibility: hidden;
margin: 0;
padding: 0;
width: 100px;
position: absolute;
top: 50px;
left: 2px;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
max-height: 0px;
}
.nav ul li ul li{
float: none;
margin: 0px;
padding: 0px;
font-size: 0.8em;
border: 0px;
font-color: black;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
max-height: 0px;
border-width: 0px;
}
.nav ul li ul li a {
height: 12px;
border-left: 1px solid rgb(0,160,170);
border-right: 1px solid rgb(0,160,170);
border-collapse:collapse;
background-color: rgba(255,255,255,0.80);
margin: 0px;
padding: 5px;
color: #000000;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
z-index: 100;
}
.nav ul li ul li:last-child a{
border-bottom: 1px solid rgb(0,160,170);}
.nav ul li:hover ul {
max-height:999px;
visibility:visible;
}
.nav ul li:hover ul li{
max-height:999px;}