I am using pure CSS to create multilevel menu. I have used the following code to generate the code :
html
<div class="main">
<ul class="mainnav">
<li></i></li>
<li class="hassubs">Master Entry <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul class="dropdown">
<li class="subs hassubs">Master Entry
<ul class="dropdown">
<li class="subs">Size</li>
<li class="subs">Color</li>
<li class="subs">Unit</li>
<li class="subs">Process Group</li>
</ul>
</li>
</ul>
</div>
I am using the following CSS for the code :
.main{width: 100%; background: #eee;}
/*General Menu Styling*/
.mainnav{margin: 0 auto}
li{list-style: none;}
li a{text-decoration: none;}
.dropdown{position: absolute; width: 150px;top: 41px; opacity: 0;visibility: hidden;transition: ease-out .35s;-moz-transition: ease-out .35s;-webkit-transition: ease-out .35s;}
.mainnav li{float: left;padding: 4px;background: black;border-left: 1px dotted #fff;height:45px;}
.mainnav li:first-child{border: none;}
.mainnav li a{ display: block;padding: 8px 20px;color: #fff;font-family: arial;}
.mainnav li:hover{background: #E87944;transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
.mainnav li:hover a{color: #fff;transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
/*First Level*/
.subs {left: -45px;position: relative;top: 0px;width: 175px;border-left: none !important; border-bottom: 1px dotted #fff !important;}
.subs:last-child{border: none !important;}
.hassubs:hover .dropdown,.hassubs .hassubs:hover .dropdown{opacity: 1;visibility: visible; transition: ease-in .35s;-moz-transition: ease-in .35s;-webkit-transition: ease-in .35s;}
.mainnav li:hover ul a,.mainnav li:hover ul li ul li a{color: white;}
.mainnav li ul li:hover,.mainnav li ul li ul li:hover{background: #E87944;transition: ease-in-out .35s;-moz-transition: ease-in-out .35s;-webkit-transition: ease-in-out .35s;}
.mainnav li ul li:hover a,.mainnav li ul li ul li:hover a{color: white;transition: ease-in-out .35s;-moz-transition: ease-in-out .35s;-webkit-transition: ease-in-out .35s;}
/*Second Level*/
.hassubs .hassubs .dropdown .subs{left: 25px;position: relative;width: 165px;top: 0px;}
.hassubs .hassubs .dropdown{position: absolute;width: 150px;left: 120px;top: 0px;opacity: 0;visibility: hidden;transition: ease-out .35s;-moz-transition: ease-out .35s;-webkit-transition: ease-out .35s;}
I want to create third level menu under the link size. How can I modify the css for the same.
Third level menu created, hope it is useful.
<!DOCTYPE html>
<html>
<body>
<style>
.main {
width: 100%;
background: #eee;
}
/*General Menu Styling*/
.mainnav {
margin: 0 auto
}
li {
list-style: none;
}
li a {
text-decoration: none;
}
.dropdown {
position: absolute;
width: 150px;
top: 41px;
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
}
.mainnav li {
float: left;
padding: 4px;
background: black;
border-left: 1px dotted #fff;
height: 45px;
}
.mainnav li:first-child {
border: none;
}
.mainnav li a {
display: block;
padding: 8px 20px;
color: #fff;
font-family: arial;
}
.mainnav li:hover {
background: #E87944;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.mainnav li:hover a {
color: #fff;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
/*First Level*/
.subs {
left: -45px;
position: relative;
top: 0px;
width: 175px;
border-left: none !important;
border-bottom: 1px dotted #fff !important;
}
.subs:last-child {
border: none !important;
}
.hassubs:hover .dropdown,
.hassubs .hassubs:hover .dropdown,
.hassubs .hassubs .dropdown .subs:hover .dropdown {
opacity: 1;
visibility: visible;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.mainnav li:hover ul a,
.mainnav li:hover ul li ul li a {
color: white;
}
.mainnav li ul li:hover,
.mainnav li ul li ul li:hover {
background: #E87944;
transition: ease-in-out .35s;
-moz-transition: ease-in-out .35s;
-webkit-transition: ease-in-out .35s;
}
.mainnav li ul li:hover a,
.mainnav li ul li ul li:hover a {
color: white;
transition: ease-in-out .35s;
-moz-transition: ease-in-out .35s;
-webkit-transition: ease-in-out .35s;
}
/*Second Level*/
.hassubs .hassubs .dropdown .subs {
left: 25px;
position: relative;
width: 165px;
top: 0px;
}
.hassubs .hassubs .dropdown,.hassubs .hassubs .dropdown .subs .dropdown {
position: absolute;
width: 150px;
left: 120px;
top: 0px;
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
}
</style>
<div class="main">
<ul class="mainnav">
<li>Home<i class="fa fa-home"></i></li>
<li class="hassubs">Master Entry <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul class="dropdown">
<li class="subs hassubs">Sub Master Entry
<ul class="dropdown">
<li class="subs">
Size
<ul class="dropdown">
<li class="subs">Size 1</li>
<li class="subs">Size 2</li>
</ul>
</li>
<li class="subs">
Color
<ul class="dropdown">
<li class="subs">Red</li>
<li class="subs"><a href="/files/public/master_entry/create/">Green/a></li>
</ul>
</li>
<li class="subs">Unit</li>
<li class="subs">Process Group</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
Related
I want to target strictly the menu when hovering. The Menu would change color and size but without affecting the li menu. How would I do that?
Note that this is suppose to be an accordion menu. The nav (sub) expands when hovering over Menu. I have spent a great deal of time but I cannot target the Menu without messing up the sub.
<nav id="menu_box">
<ul class="menu">
<li> Menu
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li> Menu
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li> Menu
<ul>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</nav>
here is the css:
https://jsfiddle.net/kgrxqL0k/1/
Maybe this:
.menu > li li a:hover {
color: pink;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 220px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 22px;
cursor: pointer;
z-index: 2;
font-size: 16px;
text-decoration: none;
color: #ffffff;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
position: absolute;
right: 26px;
top: 19px;
z-index: 5;
display: block;
height: 10px;
width: 2px;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
position: absolute;
right: 22px;
top: 23px;
display: block;
width: 10px;
height: 2px;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu ul ul li a {
padding: 14px 22px;
cursor: pointer;
z-index: 2;
font-size: 14px;
text-decoration: none;
color: #dddddd;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#menu ul li:hover a {
color: pink;
}
#cssmenu ul ul ul li a {
padding-left: 32px;
}
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul > li.has-sub > a:after {
top: 16px;
right: 26px;
}
#cssmenu ul ul > li.has-sub > a:before {
top: 20px;
}
.menu {
margin: 0 auto;
padding: 0;
width: 350px;
}
.menu li {
list-style: none;
}
.menu li a {
display: table;
margin-top: 1px;
padding: 14px 10px;
width: 100%;
text-decoration: none;
text-align: left;
vertical-align: middle;
color: #ccc;
font-weight: 600;
font-size: 18px;
overflow: hidden;
-webkit-transition-property: background;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
.menu > li:first-child a {
margin-top: 0;
}
.menu >li a:hover a:first-child {
font-size: 25px;
color: #547b16;
}
.menu li a:hover {
] -webkit-transition-property: background;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.menu li ul {
margin: 0;
padding: 0;
}
.menu li li a {
display: block;
margin-top: 0;
padding: 0 10px;
height: 0;
color: #1F3D39;
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.menu > li:hover li a {
display: table;
margin-top: 1px;
padding: 10px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.menu > li:hover li a:hover {
-webkit-transition-property: background;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.menu > li li a:hover {
color: pink;
}
<nav id="menu_box">
<ul class="menu">
<li> Menu
<ul>
<li>sub
</li>
<li>sub
</li>
<li>sub
</li>
</ul>
</li>
<li> Menu
<ul>
<li>sub
</li>
<li>sub
</li>
<li>sub
</li>
</ul>
</li>
<li> Menu
<ul>
<li>sub
</li>
<li>sub
</li>
</ul>
</li>
</ul>
</nav>
What is the best way I can make this menu default collapse when at a mobile size and use a toggle to collapse and expand.
I would prefer this to be CSS only but am unsure how to do it.
This is the source I am working from.
http://www.script-tutorials.com/demos/335/index.html
/* common and top level styles */
#nav span {
display: none;
}
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background-color: #F5F5F5;
border-bottom: 5px solid #333333;
float: left;
margin-left: 1%;
margin-right: 1%;
position: relative;
width: 98%;
}
#nav ul.subs {
background-color: #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
color: #333333;
display: none;
left: 0;
padding: 2%;
position: absolute;
top: 54px;
width: 96%;
}
#nav > li {
border-bottom: 5px solid transparent;
float: left;
margin-bottom: -5px;
text-align: left;
-moz-transition: all 300ms ease-in-out 0s;
-ms-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
transition: all 300ms ease-in-out 0s;
}
#nav li a {
display: block;
text-decoration: none;
-moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
-webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
white-space: normal;
}
#nav > li > a {
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
background-color: #F55856;
color: #FFFFFF;
}
#nav li.active > a {
background-color: #333333;
color: #FFFFFF;
}
/* submenu */
#nav li:hover ul.subs {
display: block;
}
#nav ul.subs > li {
display: inline-block;
float: none;
padding: 10px 1%;
vertical-align: top;
width: 33%;
}
#nav ul.subs > li a {
color: #777777;
line-height: 20px;
}
#nav ul li a:hover {
color: #F55856;
}
#nav ul.subs > li > a {
font-size: 1.3em;
margin-bottom: 10px;
text-transform: uppercase;
}
#nav ul.subs > li li {
float: none;
padding-left: 8px;
-moz-transition: padding 150ms ease-out 0s;
-ms-transition: padding 150ms ease-out 0s;
-o-transition: padding 150ms ease-out 0s;
-webkit-transition: padding 150ms ease-out 0s;
transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
padding-left: 15px;
}
/* responsive rules */
#media all and (max-width : 980px) {
#nav {
display: none;
}
#burger:hover #nav {
display: block;
}
#nav > li {
float: none;
border-bottom: 0;
margin-bottom: 0;
}
#nav ul.subs {
position: relative;
top: 0;
}
#nav li:hover ul.subs {
display: none;
}
#nav li #s1:target + ul.subs,
#nav li #s2:target + ul.subs {
display: block;
}
#nav ul.subs > li {
display: block;
width: auto;
}
}
<ul id="nav">
<li>Home</li>
<li>Menu 1
<span id="s1"></span>
<ul class="subs">
<li>Header a
<ul>
<li>Submenu x</li>
<li>Submenu y</li>
<li>Submenu z</li>
</ul>
</li>
<li>Header b
<ul>
<li>Submenu x</li>
<li>Submenu y</li>
<li>Submenu z</li>
</ul>
</li>
</ul>
</li>
<li class="active">Menu 2
<span id="s2"></span>
<ul class="subs">
<li>Header c
<ul>
<li>Submenu x</li>
<li>Submenu y</li>
<li>Submenu z</li>
</ul>
</li>
<li>Header d
<ul>
<li>Submenu x</li>
<li>Submenu y</li>
<li>Submenu z</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
I've wrapped the navigation in a div. Added a button and am toggling the navigation on and off when at a mobile size. As well as hiding the burger button when at full width.
<div class="nav-bar">
<div id="burger">
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<!--rest of navigation follows here-->
</div>
<script>
$(document).ready(function () {
$("#burger").click(function () {
if ($(this).data('name') == 'show') {
$("#nav").animate({
height: '0px'
}).hide()
$(this).data('name', 'hide')
} else {
$("#nav").animate({
height: '100%'
}).show()
$(this).data('name', 'show')
}
});
});
</script>
i'm fairly new to html and I need to create a basic website for my college assignment but I want to go a step up from what everyone is doing and rather then creating a basic navigation menu I decided to create something more interesting and fun, a drop down navigation menu with changing colors and transition effects (HERE IS THE ISSUE) - BUT when i hover over menu the lists do not appear.. here is my html/css codes for that section:
<ul id="navmenu">
<li>Menu</li>
<ul>
<li>Education</li>
<li>Hobbies</li>
<li>Interests</li>
</ul>
</ul>
ul
{
list-style-type: none;
}
#navmenu a {
text-decleration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
#navmenu ul {
display: none;
}
#navmenu li:hover ul {
display: block;
}
#navmenu li:hover > a {
background-color: #535ffb;
transition: ease-in all 300ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
position: relative;
left: 10px;
}
#navmenu a {
margin-top: 3px;
}
Probably because your second ul is not nested under the menu item. Try this:
ul {
list-style-type: none;
}
#navmenu a {
text-decleration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
#navmenu ul {
display: none;
}
#navmenu li:hover ul {
display: block;
}
#navmenu li:hover > a {
background-color: #535ffb;
transition: ease-in all 300ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
position: relative;
left: 10px;
}
#navmenu a {
margin-top: 3px;
}
<ul id="navmenu">
<li>
Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
I've created a drop down menu with pure CSS and I've gotten it to a place that I like EXCEPT I want it to be "drop-up" not drop-down since the menu bar is going at the bottom of the layout. I can't figure out what to add or change to make it "drop-up," help please!!
The CSS I used:
#cssmenuf {
position: relative;
height: 50px;
background: #2b2f3a;
width: auto;
}
#cssmenuf ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenuf > ul {
position: relative;
display: block;
background: #2b2f3a;
height: 32px;
width: 100%;
z-index: 500;
bottom:100%;
}
#cssmenuf > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#cssmenuf ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenuf > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 15px 20px;
color: #7a8189;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenuf > ul > li.has-subf > a {
padding-right: 25px;
}
#cssmenuf > ul > li:hover > a {
color: #ffffff;
}
#cssmenuf li.has-subf::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenuf > ul > li.has-subf::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenuf > ul > li:hover::after {
border-top-color: #ffffff;
}
#cssmenuf ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenuf ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenuf ul ul li {
position: relative;
}
#cssmenuf > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenuf ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenuf ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenuf ul ul li:hover > a {
background: #f6f6f6;
color: #8c9195;
}
#cssmenuf ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenuf ul ul li.has-subf::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenuf ul ul li.has-subf:hover::after {
border-left-color: #fff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
HTML
<div id='cssmenuf'>
<ul>
<li class='active'><a href='index.html'>
<span>About Us</span></a>
</li>
<li class='active'><a href='#'>
<span>FAQ</span></a>
</li>
<li class='active'><a href='#'>
<span>Contact Us</span></a>
</li>
<li class='active'><a href='#'>
<span>Testimonial</span></a>
</li>
<li class='has-subf'><a href='#'><span>Share On</span></a>
<ul>
<li class='has-subf'><a href='#'>
<span>Facebook</span></a></li>
<li class='has-subf'><a href='#'>
<span>Google+</span></a></li>
<li class='has-subf'><a href='#'>
<span>linkedIn</span></a></li>
<li class='has-subf'><a href='#'>
<span>Twitter</span></a></li>
</ul></li>
</ul>
</div>
In "#cssmenuf ul ul" and "#cssmenuf > ul > li:hover > ul" you use "top" instead of "bottom" to position your element. Change "top: 70px;" to "bottom: 70px;" and "top: 44px;" to "bottom: 44px;" and it should work.
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**
<nav id="nav">
<ul>
<li>Item1
<ul>
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1
<ul>
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
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;
}
i hope, below css will solve ur problem
#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 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
/*transition: all 0.3s ease-out;*/
transition:display 0s linear 0.5s,opacity 0.5s linear;
}
#nav ul li a:hover {
background-color: #0C3;
}
#nav ul li ul {
position: absolute;
height:0;
visibility:hidden;
opacity:0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#nav ul li:hover ul {
opacity:1;
visibility:visible;
overflow: visible;
}
#nav ul li ul li a {
background-color: #666;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#nav ul li ul li a:hover {
background-color: #C30;
}
#nav ul li ul li ul {
position: absolute;
left: 102px;
top: 0px;
visibility:hidden !important;
opacity:0 !important;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
overflow: hidden;
}
#nav ul li ul li:hover .last {
opacity:1 !important;
visibility:visible !important;
overflow: visible;
}
#nav ul li ul li .last li{
float: left;
position: relative;
}
#navul li ul li .last 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 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
HTML
<nav id="nav">
<ul>
<li>Item1
<ul>
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1
<ul class="last">
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>