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>

Dynamically adjust left position of sliding menu

I have a web site that uses a sliding menu. By default is sets left to -370px. This shows only the "MENU" text on the screen (see pictures below). When a user mouses over the menu it expands to the right and allows the user to select a menu item. If the user expands one of the items to show sub items, the menu grows as necessary. The issue is when the menu slides back in to the left. I would like the menu to ONLY show "MENU" regardless of the length of the text of the menu items. It works out to only showing the right 31px of the menu.
#navigation_slideout ul li.expanding{
height: auto
}
.expanding label{
/*background-color: #AAAFAB;
border-radius: 5px;
color: white;
*/
padding: 3px;
padding-left: 25px;
}
#navigation_slideout ul li ul li a.expanding1 {
padding:0;
margin:0;
height: auto ;
}
.expanding li > ul {
left:-35px;
position:relative;
width:100%;
}
.expanding input[type=checkbox] {
display: none;
}
.expanding input[type=checkbox] ~ ul {
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space:nowrap;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.expanding input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.expanding input[type=checkbox] + label:before{
transform-origin:25% 50%;
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin-left: -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
color: #AAAFAB;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
position: absolute;
margin-top: 1px;
}
.expanding input[type=checkbox]:checked + label:before {
transform: rotate(90deg);
/*margin-top: 6px;
margin-left: -25px;*/
}
#navigation_slideout {
position: fixed;
top: 85px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul
{
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: auto;
min-width:325px;
/*height: 30px;*/
height: auto;
text-align: left;
padding-top: 5px;
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#navigation_slideout ul li a{
color: #000;
text-decoration: none;
font-weight:bold;
display: block;
background-color:#548EBE;
color:white;
}
#navigation_slideout ul li ul{
}
#navigation_slideout ul li ul li {
width:10px;
position:relative;
left:-41px;
}
#navigation_slideout ul li ul li a {
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#menu{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14pt;
color:white;
font-weight:bold;
margin:0px 0px 0px 0px;
right:0px;
padding:0px 0px 0px 0px
}
#menu a{
font-size: 14pt;
color:white;
font-weight:bold;
text-decoration:none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th, td {
padding: 0;
}
.menu-col{max-width: 30px;}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" onclick="">
<table class="nospacing" style="border-style:none">
<tr>
<td style="border-style:solid">
<ul>
<li> Home</li>
<li> About</li>
<li><a href="contact/contacts.html" > Contacts</a></li> </ul>
<hr width="200px">
<ul style="position:relative">
<li class="expanding"><input class="expanding" type="checkbox" id="cb1"><label class="expanding" for="cb1">Transitioning A Subject</label>
<ul class="expanding">
<li class="expanding1"><a class="expanding1" href="#" > Overview - Transitioning a Subject</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Pick A Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Design Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Set Up Config Mgmt</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Develop Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Review Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Publish Topic Area</a></li>
</ul>
</li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb2"><label class="expanding" for="cb2">Developing the Topic Area</label></li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb3"><label class="expanding" for="cb3">Useful HTML Techniques</label></li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb4"><label class="expanding" for="cb4">Best Practice Examples</label></li>
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="menu">MENU</p>
</td>
</tr>
</table>
</div>

Are you looking for something like this?
https://jsfiddle.net/DIRTY_SMITH/ru9joppk/2/
Javascript:
function width(){
var width = document.getElementById("navigation_slideout").offsetWidth;
var offsetWidth = width - (width + width - 35);
document.getElementById('navigation_slideout').style.width = width + "px";
document.getElementById('navigation_slideout').style.left = offsetWidth + "px";
}
CSS
#navigation_slideout:hover {
left: -39px !important;
}

Make navbar stick upon scrolling to position

I am trying to make my website's navigation bar stick to the top of the page after scrolling to it along with the header image.
So far the code I have is:
<html>
<head>
<link href="C:\Users\Karl\Desktop\New Bistro\menu_assets\styles.css" rel="stylesheet" type="text/css">
<style>
.header{
height:70%;
background-image:url('http://s22.postimg.org/4eags0oep/header.png');
background-size: cover;
width:100%;
}
.nav{
height:8%;
width:100%;
}
.body{
height:100%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/6/60/Solna_Brick_wall_Silesian_bond_variation1.jpg');
}
.logo {
background-image:url('Title.png');
margin-left:auto;
margin-right:auto;
height:140px;
width:554px;
right:35%;
position:fixed;
z-index:9999
}
</style>
</head>
<body background="http://htmlgiant.com/wp-content/uploads/2010/09/A-grey.jpeg" style="margin: 0; padding: 0;">
<div class="header">
<div class="logo"></div>
</div>
<div class="nav">
<div id='cssmenu'>
<ul>
<li><a href='http://www.132glenbistro.com/'><span>Home</span></a></li>
<li><a href='http://www.132glenbistro.com/'><span>Menu</span></a></li>
<li><a href='http://www.132glenbistro.com/'><span>Gallery</span></a></li>
<li class='last'><a href='http://www.132glenbistro.com/'><span>Contact</span></a></li>
</ul>
</div>
</div>
<div class="body">
<div align="center">
<table width="70%" style="height: 200%;" cellpadding="10" cellspacing="0" border="1">
<tr>
<td colspan="2" style="height: 100px;" bgcolor="#ffffff">
</td></tr></table>
</div>
</div>
</body>
</html>
My css file is:
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-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);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > 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;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
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;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-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);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
I have tried using javascript to do this to no avail. I am new to javascript programming in general any help would be appreciated.

http://getbootstrap.com/javascript/#affix
Bootstrap provides this feature called "Affix". Even if you only use this aspect I think it would be much more beneficial to use Bootstrap than try to do it yourself. Or you can look at the source to get an idea of how they do it.
Either way without seeing your attempts I don't see how we're supposed to help you.

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.

Open submenu only after click on parent

I think my problem has been answered many times before, but I can't find exactly my case.
I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked (not hovered), showing only one submenu at a time and after click somewhere out the menu, I want the submenu to disappear.
This is what I've got now - it is based on hovering now. I tried to change a:hover to something like a:active, but it doesn't work well (I am not very good in CSS).
/* The container */
#cssmenu > ul {
display: block;
position: relative;
//width: 190px;
width: 100%;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
display: block;
position: relative;
margin: 2;
width: 95%;
height: 50px;
background-color: #abc578;
border-left: solid 0px #ffffff;
border-bottom: solid 1px #ffffff;
font: 0.7em Tahoma, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding-top: 30px;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
background: #82c500;
background: -webkit-linear-gradient(bottom, #82c500, #000000);
background: -ms-linear-gradient(bottom, #82c500, #000000);
background: -moz-linear-gradient(bottom, #82c500, #000000);
background: -o-linear-gradient(bottom, #82c500, #000000);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
content: "";
position: absolute;
top: 34px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
content: "";
position: absolute;
top: 35px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 95%;
width: 100%;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
top: -2px;
opacity: 1;
}
Does anyone have some idea please?

OK, I used this to solve my problem: How do I detect a click outside an element?
Now I have something like this in the footer of website:
$('html').click(function() {
hideSubMenu();
});
$("#cssmenu").click(function(event){
event.stopPropagation();
});
And when I clicked on submenu, I call subMenu function that shows submenu:
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
...