We Keep Coding

I have a drop down menu now how to create submenu inside one link using css

I am very new to css trying to learn new language, I have a dropdowm which i had done using css and html now how to create a submenu into it on hover over one link
Check my code till now what i did :
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #fff;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>
So when user hover on Menu dropdown should come and when user hover in dropdown sub-drop down should come
Thanks in advance!!!

You should hide the sub-menu and show it when you hover on the link, just like the first dropdown
add this code to your css file
ul.dropdown li ul {
display:none;
}
ul.dropdown li.dropdown:hover ul {
display:block;
}
See working snippet:
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #ccc;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
ul.dropdown li ul {
position: absolute;
left: 100%;
top: -2px;
background: #ccc;
width: 100%;
border-top: 2px solid #8248ac;
display: none;
}
ul.dropdown li.dropdown:hover ul {
display: block;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>

Catch all clicks that are not in set

I have a navigation drop down that displays on click. However, the pure css functionality requires you to click the link again to close the sub-menu.
I would like to modify it so that any click that is not within the sub-menu closes it.
I've tried something like this, but to no avail:
$('*:not(.submenu > li > a)').click(function() {
$('nav .dropdown input').removeAttr('checked');
console.log('clicked outside sub-menu');
});
This registers every click, even those that match .submenu > li > a meaning that the $('nav .dropdown input').removeAttr('checked'); line does work to hide the menu, but it is called even when trying to open the menu, resulting in the menu never opening.
The CSS drop down works via a checkbox input. Here is that CSS if it helps at all, however my problem is in the Javascript, because the CSS functions just fine.
Here is a fiddle, and the CSS is below: https://jsfiddle.net/z3yj7pLs/
ul.dropdown {
position:fixed;
top:30px;
width:100%;
height:3em;
margin:0;
padding:0 10px;
color:#eee;
}
ul.dropdown > li{
float:left;
list-style-type:none;
position:relative;
}
ul.dropdown label{
position:relative;
display:block;
transition:background 0.3s;
cursor:pointer;
bottom: -2px;
left: -10px;
}
ul.dropdown label:after{
content:"";
position:absolute;
display:block;
top:50%;
right:5px;
width:0;
height:0;
border-top:4px solid rgba(255,255,255,.5);
border-bottom:0 solid rgba(255,255,255,.5);
border-left:4px solid transparent;
border-right:4px solid transparent;
transition:border-bottom .1s, border-top .1s .1s;
}
ul.dropdown label:hover,
ul.dropdown input:checked ~ label{
}
ul.dropdown input:checked ~ label:after{
border-top:0 solid rgba(255,255,255,.5);
border-bottom:4px solid rgba(255,255,255,.5);
transition:border-top .1s, border-bottom .1s .1s;
}
/*hide the inputs*/
ul.dropdown input{display:none}
/*show the second levele menu of the selected voice*/
ul.dropdown input:checked ~ ul.submenu{
max-height:300px;
transition:max-height 0.5s ease-in;
}
/*style for the second level menu*/
ul.dropdown ul.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background:#444;
box-shadow:0 0 1px rgba(0,0,0,.3);
transition:max-height 0.5s ease-out;
position:absolute;
min-width:100%;
}
ul.dropdown ul.submenu li a{
display:block;
padding:12px;
color:#ddd;
text-decoration:none;
box-shadow:0 -1px rgba(0,0,0,.5) inset;
transition:background .3s;
white-space:nowrap;
}
ul.dropdown ul.submenu li a:hover{
background:rgba(0,0,0,.3);
}

If can listen to clicks on document and then check if the click was not inside the dropdown
$(document).click(function(event) {
if ($(event.toElement).parents('.dropdown').length > 0) {
console.log('Clicked inside the dropdown area');
} else {
console.log('Clicked outside the dropdown area');
}
});
Here is a working snippet:
$(document).click(function(event) {
if ($(event.toElement).parents('.dropdown').length > 0) {
console.log('Clicked inside the dropdown area');
} else {
console.log('Clicked outside the dropdown area');
}
});
body {
background: black;
}
ul.dropdown {
position: fixed;
top: 30px;
width: 100%;
height: 3em;
margin: 0;
padding: 0 10px;
color: #eee;
}
ul.dropdown > li {
float: left;
list-style-type: none;
position: relative;
}
ul.dropdown label {
position: relative;
display: block;
transition: background 0.3s;
cursor: pointer;
bottom: -2px;
left: -10px;
}
ul.dropdown label:after {
content: "";
position: absolute;
display: block;
top: 50%;
right: 5px;
width: 0;
height: 0;
border-top: 4px solid rgba(255, 255, 255, .5);
border-bottom: 0 solid rgba(255, 255, 255, .5);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
transition: border-bottom .1s, border-top .1s .1s;
}
ul.dropdown label:hover,
ul.dropdown input:checked ~ label {}
ul.dropdown input:checked ~ label:after {
border-top: 0 solid rgba(255, 255, 255, .5);
border-bottom: 4px solid rgba(255, 255, 255, .5);
transition: border-top .1s, border-bottom .1s .1s;
}
/*hide the inputs*/
ul.dropdown input {
display: none
}
/*show the second levele menu of the selected voice*/
ul.dropdown input:checked ~ ul.submenu {
max-height: 300px;
transition: max-height 0.5s ease-in;
}
/*style for the second level menu*/
ul.dropdown ul.submenu {
max-height: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
background: #444;
box-shadow: 0 0 1px rgba(0, 0, 0, .3);
transition: max-height 0.5s ease-out;
position: absolute;
min-width: 100%;
}
ul.dropdown ul.submenu li a {
display: block;
padding: 12px;
color: #ddd;
text-decoration: none;
box-shadow: 0 -1px rgba(0, 0, 0, .5) inset;
transition: background .3s;
white-space: nowrap;
}
ul.dropdown ul.submenu li a:hover {
background: rgba(0, 0, 0, .3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown">
<li>
<input id="nav-dropdown-check" type="checkbox" name="menu" />
<label for="nav-dropdown-check"><a class="nav-imitation">More</a></label>
<ul class="submenu">
<li>Sotto menu 1</li>
<li>Sotto menu 2</li>
</ul>
</li>
</ul>

It would be better to use event delegation for this task:
$('body').on('click', ':not(.submenu > li > a)', function() {
$('nav .dropdown input').removeAttr('checked');
console.log('clicked outside sub-menu');
});
That way you aren't adding tons of event handlers to the DOM - just one that ignores clicks to your menu - you may need to adjust the ':not()' selector a bit or use JS in the event handler (e.g. if (!$(this).parents('.submenu').length) { ...collapse }

I'm attempting to create a vertical menu with flyouts

I've spent all night attempting to create this. I finally got it to where it will display a flyout, but all of the dimensions are wrong, and I'm obviously not understanding the hierarchy of css here. My end goal is for it to look like this. (Vertical, color scheme, pretty icons) What I want it to look like. But I want it to act like this.
HTML:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript">$(document).ready(function(){$(".menu").menu({speed: 400,type: "vertical",});});</script>
<body>
<div class="content">
<ul class="menu">
<li class="active"><a href="JavaScript:void(0)"><i class="icon-dashboard">
</i>Dashboard</a></li>
<li><i class="icon-servers"></i>Servers
<ul>
<li>View Virtual Servers</li>
<li>Add Virtual Servers</li>
</ul>
</li>
<li><i class"icon-user"></i>Users</li>
</ul>
</div>
</body>
CSS:
#import "./font-awesome.css";
#import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro');
.menu {
position: relative;
float: left;
height: 100%;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source Sans Pro", Segoe UI, Arial;
list-style: none;
background: #303641;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li {
display: inline;
position: relative
float: left;
height: 2.5em;
line-height: 2.5em;
width: 4em;
margin: 0;
padding: 0;
font-size: 12px;
}
.menu>li>a {
display: block;
padding: 20px 22px;
color: #aaabae;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-indent: -500em;
border-bottom: 1px solid rgba(170, 171, 174, 0.15);
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
.menu li:hover>a, .menu li.active a {
background: #2b303a;
color: #fff
}
.menu li.right {
float: right
}
.menu ul, .menu ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99999;
width: 4em;
background: #303641;
box-shadow: 0 1px 1px rgba(0,0,0,0.3)
}
.menu ul {
top: 60px;
left: 0
}
.menu ul li ul {
top: 0;
left: 100%
}
.menu ul li {
clear: both;
width: 4em;
border: 0;
font-size: 12px
}
.menu ul li a {
padding: 10px 20px;
width: 4em;
color: #dedede;
font-size: 13px;
text-decoration: none;
display: inline-block;
float: left;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
menu>li.showhide {
display: none;
width: 4em;
height: 2.5em;
cursor: pointer;
color: #dedede;
border-bottom: solid 1px rgba(0,0,0,0.1);
background: #303641;
}
menu>li.showhide span.title {
margin: 16px 0 0 25px;
float: left
}
.menu>li.showhide span.icon {
margin: 17px 20px;
float: right
}
.menu>li.showhide .icon em {
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #ccc
}
.menu.vertical {
width: 4em;
}
.menu.vertical li {
width: 4em;
}
.menu.vertical li a {
display: inline-block!important;
width: 4em;
padding: 18px 20px 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.menu.vertical ul li {
width: 4em;
}
.menu.vertical ul, .menu.vertical ul li ul {
width: 4em;
}
.menu.vertical ul {
top: 0;
left: 100%
}
.menu.vertical ul li ul {
top: 1px
}
JavaScript:
$.fn.menu=function(e){function r(){$(".menu").find("li").unbind();$(".menu").find("ul").hide(0);if(window.innerWidth<=768){o();s();if(n==true){a();n=false}}else{u();i();if(t.type=="horizontal"&&t.align=="right"&&n==false){a();n=true}}}function i(){$(".menu li").bind("mouseover",function(){$(this).children("ul").stop(true,true).fadeIn(t.speed)}).bind("mouseleave",function(){$(this).children("ul").stop(true,true).fadeOut(t.speed)})}function s(){$(".menu > li").bind("click",function(){if($(this).children("ul").css("display")=="none"){$(this).find("ul").slideDown(t.interval)}else{$(this).children("ul").slideUp(t.interval)}})}function o(){$(".menu > li:not(.showhide)").hide(0);$("-menu > li.showhide").show(0);$(".menu > li.showhide").bind("click",function(){if($(".menu > li").is(":hidden")){$(".menu > li").slideDown(300)}else{$(".menu > li:not(.showhide)").slideUp(300);$(".menu > li.showhide").show(0)}})}function u(){$(".menu > li").show(0);$(".menu > li.showhide").hide(0)}function a(){$(".menu > li").addClass("right");var e=$(".menu").width();var t=$(".menu").children("li");var n=0;$(".menu").children("li:not(.showhide)").detach();for(var r=t.length;r>=1;r--){$(".menu").append(t[r])}}var t={speed:300,type:"horizontal",align:"left"};$.extend(t,e);var n=false;if(t.type=="vertical"){$(".menu").addClass("vertical");if(t.align=="right"){$(".menu").addClass("right")}}$(".menu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");r();$(window).resize(function(){r()})}
Thank you in advance for any help you provide! I appreciate anything :)

A few things need to be reset.
Remove overflow: hidden from the ul.menu. Otherwise your flyouts will be... hidden. :)
Set the .menu>li to position: relative and then the sub uls to position: absolute offsetting however you need to.
Make sure you're targeting specific <a> elements with your initial css by using child selectors instead of decendant selectors. That is, use .menu > li > a vs .menu li a. The former will only target as that are children of the lis that are children of .menu. The latter will target all as that are descendant of all lis that are descendants of .menu which will include your flyout's <a>s.
This fiddle should get your started.

How could I make a menu dropdown on click

how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}

You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)

For click you will need to use Javascript, as there is no click event handling in CSS.

auto resize navigation bar on window resize or mobile device

i have found the code for this: http://media02.hongkiat.com/responsive-web-nav/demo/index.html menu here: http://www.hongkiat.com/blog/responsive-web-nav/
and i am trying to do it with my menu:
CSS:
<style type="text/css">
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
HTML:
<ul id="trans-nav">
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Widgets</li>
<li>Thingamabobs</li>
<li>Doohickies</li>
</ul>
</li>
<li>Contact</li>
</ul>
for some reason i cannot get it working, any ideas what i can do to make my menu the same as the one on that website or alternatively, if that will be too complicated to get my menu to just change to a dropdown menu (select) on screen resize

You want to css media query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
More details
https://developer.mozilla.org/en/docs/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/