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>
Related
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>
I have a dropdown menu in SilverStripe that works although when you hover over the space where the downdown part it shows up when I only want it to show up when you hover over the main menu item. I don't really know if that makes sense. I have included my code so you can maybe see what I mean.
CSS
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
height: 40px;
width: auto;
padding: 0;
margin: 0;
float: left;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
}
/* Links 8*/
.menu li a {
display: block;
padding: 0 20px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color: #f3f3f3;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
text-transform: uppercase;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #D12D3C;
}
.menu li > a:hover {
color: #D12D3C;
}
.menu li > a.current {
color: #000;
background-color: #fff;
}
.menu li > a.section {
color: #000;
background-color: #fff
}
/* Sub Menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
text-transform: none;
text-transform: none;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
z-index: 9999;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: auto;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.sub-menu li:hover {
height: auto;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 210px;
padding: 4px 0 4px 30px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
HTML
<div class="large-12 medium-12 header columns">
<img src="themes/Connected/images/Connected-banner.png" alt="banner" />
</div>
<div class="large-12 medium-12 band columns">
<ul class="menu">
<% control ChildrenOf(Home) %>
<li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML" style="text-transform:uppercase;">$MenuTitle</a>
<% if Children %>
<ul class="sub-menu">
<!-- Sub Menu -->
<% control Children %>
<li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<img src="/themes/Connected/images/search-icon.png" alt="search-icon" />
</div>
We can move the sub menu off screen until it is hovered by adjusting the top value.
CSS
.menu ul {
position: absolute;
top: -100000px;
left: 0;
opacity: 0;
background: #1f2024;
text-transform: none;
text-transform: none;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s, top 0s .35s;
transition: opacity .25s ease .1s, top 0s .35s;
z-index: 9999;
}
.menu li:hover > ul {
opacity: 1;
top: 40px;
-webkit-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
Demo
The benefit of doing this instead of hiding and showing the menu with display: none and display: block is this allows us to have a nice css transitions fade the menu in and out.
Try removing "opacity 0;" and change it to "display: none;" and "opacity: 1" to "display: block;". Because the sub menu is actually there even though you can't see it, so it is still being hovered on. This seems to be a pure css issue from what I can see. Hope that helps
I have an ul li structure that give me one fly out that is it gives me sub-menu but i want one more sub-menu on hover first sub-menu.
following is the structure
My Css
.main-navi li{
position: relative;
}
.main-navi li div,
.main-navi a{
display: block;
line-height: 80px;
text-transform: uppercase;
font-weight: 900;
padding-left: 30px;
color: #999;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1;
background: #3a5795;
cursor: pointer;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div{
padding-left: 0;
border: none;
}
.main-navi li div{
position: relative;
z-index: 1;
background: #1A1A1A;
padding-left: 30px;
border-bottom: 1px solid #212121;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi a.active:hover,
.main-navi a.active{
padding-left: 50px;
color: #fff;
background: #ff3333;
cursor: default;
}
.main-navi .dot{
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 30px;
background: #333;
border-radius: 50%;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div .corner,
.main-navi a .corner{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
border-top: 40px solid transparent;
border-left: 20px solid #1A1A1A;
border-bottom: 40px solid transparent;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div.active .corner,
.main-navi a.active .corner{
right: -20px;
opacity: 1;
border-left: 20px solid #ff3333;
}
.main-navi a.active:hover .dot,
.main-navi a.active .dot{
background: #fff;
}
.main-navi li div:hover,
.main-navi a:hover{
padding-left: 50px;
color: #fff;
background: #151515;
}
.main-navi li div.active{
padding-left: 50px;
background: #ff3333;
color: #fff;
}
.main-navi li div:hover .dot,
.main-navi a:hover .dot{
background: #ff3333;
}
.main-navi li div.active .dot{
background: #fff;
}
.drop-down {
left: 0;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-track
{
background-color: #ff3333;
}
::-webkit-scrollbar-thumb
{
background-color: #ffffff;
}
::-webkit-scrollbar-button
{
background-color: #000000;
}
::-webkit-scrollbar-corner
{
background-color: black;
}
.main-navi li:hover .drop-down{
left: 100%;
opacity: 1;
}
.active .drop-down{
overflow: visible;
}
.main-navi .drop-down a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down a:hover{
padding-left: 40px;
}
<!-- code i created to get sub of sub menu-->
.drop-down-in {
left: 100;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 1;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi .drop-down li:hover .drop-down-in{
left: 200%;
opacity: 1;
}
.active .drop-down-in{
overflow: visible;
}
.main-navi .drop-down .drop-down-in a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down .drop-down-in a:hover{
padding-left: 40px;
}
<!--ends here-->
this is css that contains code for both sub and sub inside sub-menu. class drop-down works fine i want one more sub-menu so i created class drop-down-in which is not working.
My html code is:
<ul>
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
Here is a Fiddle to my question.
You forgot to add the class attribute with the value "main-navi" to your first "ul" element.
<ul class="main-navi">
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>
Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>
Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
</li>
And in CSS you schould update:
.main-navi li:hover .drop-down{
left: 100%;
}
If the value for "left" is 100%, than this element wont be visible.
Here you can find an updated Fiddle.
Good day to all!
I need help to modify a CSS navigation menu with dropdowns to add sub-menu to it.
For example, I have menu options "You" -> "Plan". I need to add a sub-menu into "Plan", so when user hovers the cursor over "Plan", a sub-menu with other options appears - just like when he hovers over "You" option.
HTML:
<nav>
<ul>
<li>View</li>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li>Help</li>
</ul>
</nav>
CSS:
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
Any help would be appreciated!
You just need to add another ul for your subnav set to position:absolute and display: none and then show it when you hover over .dropOut ul li
.subnav{
display:none;
background: black;
position: absolute;
left: 100%;
top: 0;
}
.dropOut ul li:hover .subnav{
display: block;
}
Just be sure to set .dropOut ul li to position: relative so that it will contain your subnav:
.dropOut ul li {
position: relative; //add
text-align: left;
float: left;
width: 125px;
....
HTML
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="subnav">
<li>menu 1</li>
<li>menu 1</li>
<li>menu 1</li>
</ul>
</li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
FIDDLE
You shouldn't use opacity to do this use display instead i have did this using opacity but that leaves some space use display property to avoid this http://jsfiddle.net/k2rjkdxy/ This one with display http://jsfiddle.net/k2rjkdxy/1/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
.d{
opacity:0;
}
ul li ul li:hover .d{
opacity:1;
}
<nav>
<ul>
<li>View</li>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="d"><li>text</li>
<li>text</li>
<li>text</li>
</ul></li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li>Help</li>
</
This one with display property
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: center;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
display:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { display:block; margin-top: 8px; }
.d{
display:none;
}
ul li ul li:hover .d{
background:skyblue;
position:absolute;
display:block;
}
<nav>
<ul>
<li>View</li>
<li class="drop">
You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan
<ul class="d"><li>text</li>
<li>text</li>
<li>text</li>
</ul></li>
<li>Account Settings</li>
<li>Switch Account</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</li>
<li>Help</li>
</
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>