Make navbar stick upon scrolling to position

Make navbar stick upon scrolling to position - javascript

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.

Related

Responsive Navbar Dropdown (Not Bootstrap)

I have this Navbar and it works perfectly in the original mode, and when the screen's width is less than 950px it displays the buttons one under another, but the problem is, dropdown button is also there, which is okay, but it opens the dropdown content somewhere on a totally wrong side. What I wish is to make the dropdown content appear under the dropdown button. Is there something wrong with my code? Any help will be appreciated. My code:
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
/* min-width: 160px;*/
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

Add position:relative to nav ul li and give this css to dropdown
.dropdown-contentd{
width:100%;
}
.dropdown-contentd a{
text-align:center;
}
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
nav ul li{
position:relative
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
/* min-width: 160px;*/
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
margin: 0;
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li{
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
.dropdown-contentd{
width:100%;
}
.dropdown-contentd a{
text-align:center;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

Add position:relative to parent element #dropdownd. Then set position:absolute and top:value styles to child element .dropdown-contentd
$(function() {
var ulLi = $('nav ul > li');
var fa = $('nav ul > li:last-of-type a .fa');
$('nav ul').append('<ol></ol>');
$('nav').each(function() {
for (var i = 0; i <= ulLi.length - 3; i++) {
$('nav ul > ol').append("<li>" + i + "</li>");
$('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
}
});
$('#attr_nav').click(function() {
$('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);
});
});
* {
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
.thum {
background-color: gray;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
cursor: pointer;
}
#attr_nav .dropdown-contentd {
position: relative;
}
/* add this */
#dropdownd {
position:relative
}
#dropdownd .dropdown-contentd {
/* display: none;*/
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
/* start: i changed here */
position: absolute;
top: 30px;
left: 0; right: 0; margin: 0 auto; /* this line optional...horizontal centering for absolute element */
min-width: 160px;max-width: 250px;
/* end */
background-color: royalblue;
color: #FFF;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
/*border: 1px solid black;*/
padding: 0;
/* padding-top: 10px;
padding-bottom: 10px;*/
/* transition: all .3s ease;*/
}
#dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
/* padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/
}
.a-padding {
padding-left: 10px;
padding-right: 10px;
}
/*nav ul li .dropdownd:hover .dropdown-contentd {
max-height: 500px;
transition: max-height 0.25s ease-in;
}*/
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul>ol {
position: absolute;
top: 49px;
right: 0;
background: royalblue;
text-align: center;
list-style: none;
display: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
nav ul>ol>li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul>ol>li:hover a {
margin: 20px;
}
nav ul>ol>li:hover {
color: #444;
cursor: pointer
}
#attr_nav:hover {
cursor: pointer;
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
#media screen and (max-width:950px) {
nav ul>li:not(:first-child) {
display: none;
}
nav ul>li:nth-last-of-type(2) {
display: inline-block;
}
nav ul>li:last-of-type {
display: inline-block;
}
}
#media screen and (max-width:370px) {
nav ul>li:first-child {
display: none;
}
}
#media screen and (max-width:270px) {
nav ul>li:last-of-type {
display: none;
}
}
#media screen and (min-width:950px) {
nav ul>ol>li {
display: none
}
nav ul>li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<nav>
<ul>
<li>Home</li>
<li>Earn Coins</li>
<li>Get Rewards</li>
<li>Referrals</li>
<li>Vouchers</li>
<li>
<div id="dropdownd">
More
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
<a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
</div>
</div>
</li>
<li>
<a id="attr_nav">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" class="coinsnumber">
<?php include 'navbar_coins.php'; ?>
</a>
</li>
</ul>
</nav>

Problems with my menu

I hope the following problem won't give you a headache because it is too late for me. Anyway, I am creating a menu for my website but there is a problem: when you switch to mobile view, the menu displays at the top of the first page and when you press the hamburger icon it displays under it. It should not display at all, only when the button is pressed, you also see a weird animation when it switches to mobile view.
HTML:
<header>
<nav>
<ul id="nav" style="top:-15rem;">
<li class="nav_link">HOME</li>
<li class="nav_link">ABOUT</li>
<li class="nav_link">WORK</li>
<li class="nav_link">CONTACT</li>
</ul>
<div id="bg_fix" class="shadow_on">
<a id="logo"> <span class="font">Nadia</span> <img src="images/logo.png" alt="logo"></a>
<div id="burger"> <span></span> <span></span> <span></span> </div>
</div>
</nav>
</header>
CSS:
p, h1, h2, h3, h4, li, a, button {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #3d3d3d;
}
a {
text-decoration: none;
}
.font {
font-family:'Montserrat', sans-serif;
font-size:30px;
}
header {
background-color: #ffffff;
display: inline;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:100;
}
#bg_fix {
padding: 0.5em 1em 0.5em;
display: block;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1;
transition: all 0.7s ease-in-out;
}
.shadow_on {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav {
transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav li {
cursor: pointer;
display: block;
border-bottom: 1px #E5E5E5 solid;
text-decoration: none;
text-align: center;
color: #3d3d3d;
padding: 1rem 0;
background-color: #ffffff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#nav li:last-child {
border-bottom: 0;
}
#nav li:active {
background-color: #E5E5E5;
}
#logo {
display: inline-block;
cursor: pointer;
}
#logo img {
height: 2rem;
}
#burger {
margin-top: 0.6rem;
float: right;
display: inline;
width: 1.4em;
vertical-align: middle;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#burger span {
display: block;
height: 0.15rem;
margin-top: 0.3rem;
width: 100%;
background-color: #3d3d3d;
opacity: 1;
left: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#burger span:first-child {
margin-top: 0;
}
#burger.open span {
background-color: #2C9FD1;
}
#media (min-width: 44em) {
header {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
box-shadow: 0px 0.25em 0.2em -0.2em rgba(61,61,61,0.37);
z-index: 1;
}
nav {
max-width: 95rem;
display: block;
margin: 0 auto;
}
#burger {
display: none;
}
#logo {
float: right;
padding: 0.5rem 0;
margin-right: 2rem;
margin-top: 0.2rem;
}
#nav {
padding: 0.5rem 0;
transition: none;
top: 0 !important;
position: static;
display: inline-block;
width: 70%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: 3rem;
margin-top: 1.4rem;
padding: 0;
}
#nav li {
border-bottom: 0;
margin-right: 2.5rem;
font-size: 1.1rem;
transition: all 0.1s ease-in-out;
display: inline-block;
position: relative;
padding: 0.3rem 0;
}
#nav li {
display: inline;
}
#nav li:active {
background-color: #ffffff;
}
#nav li:hover a, #nav li:active a{
opacity:0.5;
}
#bg_fix {
transition: none;
padding: 0;
display: inline;
position: static;
}
#logo {
margin-top: 0.1rem;
padding: 0.7rem 0;
}
#logo img {
height: 2.3rem;
}
}
JS:
var burger = document.getElementById("burger");
var nav = document.getElementById("nav");
var navLinks = document.getElementsByClassName("nav_link");
var bgFix = document.getElementById("bg_fix");
var logo = document.getElementById("logo");
burger.onclick = function() {
burger.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
if (nav.style.top === "-15rem") {
nav.style.top = "3rem";
} else {
nav.style.top = "-15rem";
}
}
function markSelection() {
burger.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
nav.style.top = "-15rem";
}
for (i = 0, len=navLinks.length; i < len; i++) {
navLinks[i].onclick = markSelection;
}
fiddle: https://jsfiddle.net/gu0j8r57/
It is hard to see here because there is only one page but you can definetely see the menu appear on the page above the menu and it's driving me crazy, you can see the weird animation when it switches to mobile view tho.
Edit: updated jsfiddle so you can see the menu appear above it on mobile view

You need to mark #nav has open. The transition: all 0.7s ease-in-out; should only happen on #nav.open
JS: (jsFiddler)
var burger = document.getElementById("burger");
var nav = document.getElementById("nav");
var navLinks = document.getElementsByClassName("nav_link");
var bgFix = document.getElementById("bg_fix");
var logo = document.getElementById("logo");
burger.onclick = function() {
burger.classList.toggle("open");
nav.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
if (nav.style.top === "-15rem") {
nav.style.top = "3rem";
} else {
nav.style.top = "-15rem";
}
}
function markSelection() {
burger.classList.toggle("open");
nav.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
nav.style.top = "-15rem";
}
for (i = 0, len=navLinks.length; i < len; i++) {
navLinks[i].onclick = markSelection;
}
CSS:
p, h1, h2, h3, h4, li, a, button {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #3d3d3d;
}
a {
text-decoration: none;
}
.font {
font-family:'Montserrat', sans-serif;
font-size:30px;
}
header {
background-color: #ffffff;
display: inline;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:100;
}
#bg_fix {
padding: 0.5em 1em 0.5em;
display: block;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1;
transition: all 0.7s ease-in-out;
}
.shadow_on {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav {
// transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav.open {
transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav li {
cursor: pointer;
display: block;
border-bottom: 1px #E5E5E5 solid;
text-decoration: none;
text-align: center;
color: #3d3d3d;
padding: 1rem 0;
background-color: #ffffff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#nav li:last-child {
border-bottom: 0;
}
#nav li:active {
background-color: #E5E5E5;
}
#logo {
display: inline-block;
cursor: pointer;
}
#logo img {
height: 2rem;
}
#burger {
margin-top: 0.6rem;
float: right;
display: inline;
width: 1.4em;
vertical-align: middle;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#burger span {
display: block;
height: 0.15rem;
margin-top: 0.3rem;
width: 100%;
background-color: #3d3d3d;
opacity: 1;
left: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#burger span:first-child {
margin-top: 0;
}
#burger.open span {
background-color: #2C9FD1;
}
#media (min-width: 44em) {
header {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
box-shadow: 0px 0.25em 0.2em -0.2em rgba(61,61,61,0.37);
z-index: 1;
}
nav {
max-width: 95rem;
display: block;
margin: 0 auto;
}
#burger {
display: none;
}
#logo {
float: right;
padding: 0.5rem 0;
margin-right: 2rem;
margin-top: 0.2rem;
}
#nav {
padding: 0.5rem 0;
transition: none;
top: 0 !important;
position: static;
display: inline-block;
width: 70%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: 3rem;
margin-top: 1.4rem;
padding: 0;
}
#nav li {
border-bottom: 0;
margin-right: 2.5rem;
font-size: 1.1rem;
transition: all 0.1s ease-in-out;
display: inline-block;
position: relative;
padding: 0.3rem 0;
}
#nav li {
display: inline;
}
#nav li:active {
background-color: #ffffff;
}
#nav li:hover a, #nav li:active a{
opacity:0.5;
}
#bg_fix {
transition: none;
padding: 0;
display: inline;
position: static;
}
#logo {
margin-top: 0.1rem;
padding: 0.7rem 0;
}
#logo img {
height: 2.3rem;
}
}
HTML I didn't modify your html
<header>
<nav>
<ul id="nav" style="top:-15rem;">
<li class="nav_link">HOME</li>
<li class="nav_link">ABOUT</li>
<li class="nav_link">WORK</li>
<li class="nav_link">CONTACT</li>
</ul>
<div id="bg_fix" class="shadow_on">
<a id="logo"> <span class="font">Nadia</span> <img src="images/logo.png" alt="logo"></a>
<div id="burger"> <span></span> <span></span> <span></span> </div>
</div>
</nav>
</header>

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>

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.

We Keep Coding

JavaScript is the programming language of the Web.

Make navbar stick upon scrolling to position - javascript

Related

Responsive Navbar Dropdown (Not Bootstrap)

Problems with my menu

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

I'm attempting to create a vertical menu with flyouts

How could I make a menu dropdown on click

Categories

Resources