Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

i want to make pure css horizontal nav with vertical SubMenu and Horizontal SubMenus of SubMenus

i want to make pure css horizontal nav with vertical SubMenu and Horizontal SubMenus of SubMenus

Problem

i want to fix this fiddle u can see its not working well. i want to make this nav horizontally and submenu vertically and submenus of submenu horizontally but problem is that i also used transitions on this but its not working correct. the first submenu dont drop smoothly but rollout smoothly and 3rd menu dont work like smooth rolling and rolling out. i want to fix this out and i want help how to figure this out. here is the fiddle, all codes included this. http://jsfiddle.net/hsn0/nQneb/

css

#nav {
height: auto;
width: auto;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 }
 #nav ul li a:hover {
background-color: #0C3;
 }
 #nav ul li ul {
position: absolute;
visibility: hidden;
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
overflow: hidden;
height: 0px;
 }
 #nav ul li:hover ul {
height: 100px;
visibility: visible;
overflow: visible;
 }
 #nav ul li ul li {
-ms-transition: all 1s;
-o-transition: all 1s;
 }
 #nav ul li ul li a {
background-color: #666;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
 }
 #nav ul li ul li a:hover {
background-color: #C30;
 }
 #nav ul li ul li ul {
position: absolute;
left: 102px;
top: 0px;
display: none;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;
overflow: hidden;
visibility: hidden;
width: 0px;
 }
 #nav ul li ul li ul li {
float: left;
position: relative;
 }
 #nav ul li ul li:hover ul {
width: 104px;
display: block;
/* [disabled]overflow: visible; */
visibility: visible;
 }

 **html**

Problem courtesy of: user2579060

Solution

please checkout this demo

I feel major problem is due to visibility and overflow, We can transition opacity and Height though.

I used few menu part for this... I tried with height, although it will work with all also.

#nav ul li ul {
    position: absolute; 
    -webkit-transition: height  1s linear 0s;
    -moz-transition: height  1s linear 0s;
    -ms-transition: height  1s linear 0s;
    -o-transition: height  1s linear 0s;
    transition: height 1s linear 0s;    
    height: 0px;
    overflow:hidden;
}
#nav ul li:hover ul {
    height: 100px;

        -webkit-transition: height 1s linear 0s;
    -moz-transition: height 1s linear 0s;
    -ms-transition: height 1s linear 0s;
    -o-transition: height 1s linear 0s;
    transition: height 1s linear 0s;
}
Solution courtesy of: Kasma

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

i want to make pure css horizontal nav with vertical SubMenu and Horizontal SubMenus of SubMenus

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×