Adding Dropdown to Side Navigation Menu - html

Editing and adding code to snippet .This is the full code extraced from the below two links.
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a.item {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.nav .last {
border-bottom: 1px solid #ccc;
}
.nav a.item:hover {
color: #fff;
background-color: #cf0000;
transition: 0.4s;
}
.nav .icon {
padding-right: 10px;
font-size: 35px;
}
.nav ul {
display: flex;
position: absolute;
width: 100%;
margin-top: 50px;
}
.nav ul li {
list-style: none;
}
.nav ul li a.inline {
font-size: 26px;
color: #ccc;
padding: 6px 5px 3px;
}
.nav ul li a.inline:hover {
color: #cf0000;
}
.content p{
font-size: 18px;
text-align: center;
margin-left: 310px;
}
.footer-home{
position: fixed;
left: 0;
bottom: 0;
width:100%;
height: auto;
background-color:#282828;
color: white;
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
</script>
</head>
<body>
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<img src="#" alt="" width="150" height="100">
<i class="fas fa-home icon"></i>Home
<i class="fas fa-desktop icon"></i>Dashboards
<i class="fas fa-map-marker icon"></i>Engagements
<i class="fab fa-wpforms icon"></i>Contact
<ul>
Can't get dropdown to work.
Tried several ways to make dropdown active.
html - http://textsnip.com/nau26f
css - http://textsnip.com/dyk75z
Trying to make dropdown active when hovering over dashboards. Any help would be greatly appreciated.


Here's my solution
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
body {
font-family: 'Alegreya Sans', sans-serif;
overflow-x: hidden;
background: gray;
color: white;
}
#content {
padding: 15px;
transition: margin-left 0.7s;
overflow: hidden;
width: 100%;
}
.slide a {
color: #000;
font-size: 36px;
}
.nav .close {
position: absolute;
top: 8px;
right: 22px;
margin-left: 50px;
font-size: 30px;
color: #ccc;
}
.nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #282828;
overflow-x: hidden;
padding-top: 60px;
transition: 0.7s;
}
.nav a.item {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.nav .last {
border-bottom: 1px solid #ccc;
}
.nav a.item:hover {
color: #fff;
background-color: #cf0000;
transition: 0.4s;
}
.nav .icon {
padding-right: 10px;
font-size: 35px;
}
.nav ul {
display: flex;
position: absolute;
width: 100%;
margin-top: 50px;
}
.nav ul li {
list-style: none;
}
.nav ul li a.inline {
font-size: 26px;
color: #ccc;
padding: 6px 5px 3px;
}
.nav ul li a.inline:hover {
color: #cf0000;
}
.content p{
font-size: 18px;
text-align: center;
margin-left: 310px;
}
.footer-home{
position: fixed;
left: 0;
bottom: 0;
width:100%;
height: auto;
background-color:#282828;
color: white;
padding: 10px;
text-align: center;
}
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.dropbtn {
display: flex;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
}
.dropdown-content a {
display: flex;
width: 100%;
flex-direction: row;
padding: 18px 30px;
font-size: 30px;
text-decoration: none;
color: #ccc;
background-color: #3d3d3d;
border-top: 1px solid #ccc;
}
.dropdown-content a:hover {background-color: #cf0000;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #cf0000;}
<script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<div id="content">
<span class="slide">
<a href="#" onclick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" class="nav">
<a href="#" class="close" onclick="closeSlideMenu()">
<i class="fas fa-times"></i>
</a>
<img src="#" alt="" width="150" height="100">
<i class="fas fa-home icon"></i>Home
<div class="dropdown">
<a class="dropbtn">
<i class="fas fa-desktop icon"></i>
Dashboards
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a href="maps.html" class="item">
<i class="fas fa-map-marker icon"></i>
Engagements
</a>
<a href="contact.html" class="item last">
<i class="fab fa-wpforms icon"></i>
Contact
</a>
</div>
</div>

Related

Change font-size does not influence whole header

I am trying to do sticky header on my existing page an I have all margins in rem but when I set up font-size for main header which contains all header content is influenced just ul list part and other margins are the same. Can you please advice me what is problem?
I want to make header more slim when I scroll down.
JQuery code:
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
CSS header code:
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8rem !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3rem;
margin: 1.225rem 0.9375rem;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375rem 0 0.9375rem 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225rem 1.875rem 1.225rem 0;
}
.mheader__search input {
width: 100%;
height: 2.3rem;
border: 1px solid #aaa;
border-radius: 0.25rem;
font-size: 1.0625rem;
padding-left: 0.25rem;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125rem;
cursor: pointer;
}
HTML code
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
Thank you

Make sure you use EM instead of REM if you want to make it relative to some parent. So all the REM sizes are based on the <html> tag.
If you do em,
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
body{
height:4000px;
}
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8em !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3em;
margin: 1.225em 0.9375em;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375em 0 0.9375em 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225em 1.875em 1.225em 0;
}
.mheader__search input {
width: 100%;
height: 2.3em;
border: 1px solid #aaa;
border-radius: 0.25em;
font-size: 1.0625em;
padding-left: 0.25em;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125em;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>

Why isn't the exit icon showing when menu is clicked

I have tried literally everything to try and make the exit icon show up on the menu by giving it an index of 999 but still no luck in making it show, any idea why it is not working?
I have added the JavaScript as well.
menuBtn.addEventListener('click' , () => {
const menu = document.querySelectorAll('.menu');
for(let el of menu){
el.style.display = 'block'
}
})
/*Navbar*/
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>

Because it never made display:block when enter in small screen like you did for menubtn.
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
Do the same for exit icon under #media (max-width: 934px) also
.fa.fa-times-circle.exit {
display: inline-block;
}
And remove this code
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
Working example:
/*Navbar*/
body {
background-color: #ccc;
}
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.fa.fa-times-circle.exit {
display: inline-block;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>

Why is my drop down menu not Working on HTML,CSS

I have no idea why my drop down menu that im trying to include is not appearing and i cant seem to find whats wrong, i saw that the only way for it to appear is to remove hidden but if i do that i doesnt look how i want it to, yet if i have the hidden when i hover over the servicios tab its not showing anything which i cannot find the reason on why it doesnt appear there
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url(bp.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
}
.nav_bar{
display: flex;
padding: 40px 120px;
}
.nav-logo img{
width: 135px;
}
.nav_links{
flex: 1;
}
.nav_links ul{
margin-left: 50px;
display: inline;
list-style: none;
}
.nav_links ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
.nav_links ul a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
.nav_links ul li::after{
content: '';
width: 0;
height: 2px;
background: red;
display: block;
margin: auto;
transition: 0.45s;
}
.nav_links ul li:hover::after{
width: 100%;
}
.btn{
padding: 10px 10px;
border: 0;
background: red;
font-weight: bold;
cursor: pointer;
}
.nav_links .btn{
float: center;
}
.frase{
margin: 100px 130px;
color: #fff;
}
.frase h1{
font-size: 56px;
margin-bottom: 30px;
}
.vertical_bar{
height: 100%;
background: red;
top: 0;
left: 0;
position: absolute;
}
.icono_busqueda{
height: 60%;
width: 80px;
}
.icono_busqueda .fa{
margin: 45px 23px;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 60%;
width: 80px;
}
.iconos_sociales .fa{
margin: 45px 23px;
display: block;
color:black;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 35%;
width: 80px;
background: white;
text-align: center;
padding-top: 27%;
bottom: 0;
position: absolute;
}
.iconos_sociales .fa{
margin: 15px 15px;
display: block;
padding: 8px;
border: 1px solid black;
border-radius: 0;
cursor: pointer;
}
*{
margin: 0;
padding: 0;
}
.sub_menu_ser
{
display: none;
}
.nav_links ul li:hover .sub_menu_ser
{
display: block;
position: absolute;
background: red;
margin-top: 15px;
margin-left: -15px;
}
.nav_links ul li:hover .sub_menu_ser ul
{
display: block;
margin: 10px;
}
.nav_links ul li:hover .sub_menu_ser li
{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: left;
}
:last-child
{
border-bottom: none;
}
.nav_links ul li:hover .sub_menu_ser ul li a:hover
{
color: red;
}
<html>
<head>
<title> Animal Care</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="hero">
<div class="nav_bar">
<div class="nav_logo">
<img src="logo.png">
</div>
<div class="nav_links">
<ul>
<li>Sobre Nosotros</li>
<li>Servicios</li>
<div class="sub_menu_ser">
<ul>
<li>Peluqueria</li>
<li>Veterinario</li>
<li>Cirugia</li>
<li>Limpieza</li>
</ul>
</div>
<li>Contacto</li>
</ul>
<button type="button" class="btn">Registrarse</button>
</div>
<div class="frase">
<h1>Cuidando a Nuestros <br> Mas Queridos</h1>
<button type="button" class="btn">Explorar</button>
</div>
<div class="vertical_bar">
<div class="icono_busqueda">
<i class="fa fa-search"></i>
<i class="fa fa-list"></i>
</div>
<div class="iconos_sociales">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</body>
</html>

Code to hide the element:
#element {
display: none;
}
Code to show the element:
#element:hover {
display: block;
}

CSS Dropdown Menu does not stay visible on hover

I am a new learner of CSS and I have a problem with the position of dropdown menu, does not stay on hover. I have done some testing and I found that the problem is the position of left element because when I chance the value of left, the dropdown stay on hover and it lets do it but it is not in its position.
I do not know how to fix it, I will appreciate any help of anyone.
/* Grid View*/
* {
box-sizing: border-box;
}
/* Body Size*/
body {
background-color: white;
position: relative;
margin-right: 150px;
margin-left: 150px;
margin-top: 20px;
}
/*Header*/
header {
position: fixed;
top: 0;
margin: 80%;
height: 100px;
background-color: whitesmoke;
color: black;
padding: 10px;
text-align: center;
}
/* Header <Logo> */
logo {
position: fixed;
left: 180px;
top: 0px;
width: 250px;
height: 140px;
}
/* Header < Social Bar>*/
.icon-bar {
width: 100px;
overflow: auto;
}
/* Social Icons */
.icon-bar {
float: right;
width: 30%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
top: 100px;
}
.icon-bar a:hover {
background-color: yellow;
}
/* Header <Menu>*/
.menu-button1 {
position: relative;
left: 300px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button2 {
position: relative;
left: 293px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button3 {
position: relative;
left: 286px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
border-radius: 6px;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 0px;
left: 256px;
margin: 4px 2px;
padding: 4px 28px 4px 28px;
text-align: center;
text-decoration: none;
font-size: 20px;
font-family: Arial;
border-radius: 6px;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-menu a {
background-color: #cccc00;
color: #47037A;
text-decoration: none;
display: block;
padding: 4px 28px 4px 28px;
border-radius: 6px;
margin-bottom: 1px;
}
/* Change color of dropdown links on hover */
.dropdown-menu a:hover {
display: block;
background-color: #47037A;
color: #cccc00;
padding: 4px 28px 4px 28px;
border-radius: 6px;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
display: inline-block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .menu-button3 {
background-color: #cccc00;
}
.menu-button4 {
position: relative;
left: 280px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button5 {
position: relative;
left: 273px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button6 {
position: relative;
left: 266px;
top: -48px;
background-color: #47037A;
border: none;
color: #cccc00;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button7 {
position: relative;
left: 260px;
top: -48px;
background-color: #cccc00;
border: none;
color: #47037A;
padding: 8px 40px 8px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.menu-button1:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button2:hover {
background-color: #cccc00;
color: #47037A;
}
.dropdown:hover .menu-button3 {
background-color: #cccc00;
color: #47037A;
}
.menu-button4:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button5:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button6:hover {
background-color: #cccc00;
color: #47037A;
}
.menu-button7:hover {
background-color: #47037A;
color: #cccc00;
}
.dropdown-content-menu-button3 {
display: none;
position: absolute;
background-color: #47037A;
min-width: 160px;
}
/* Line separate header */
.hr-header {
position: fixed;
top: 218px;
height: 3px;
left: 0px;
right: 0%;
background-color: #47037A;
}
/* Content of Body */
.content {
position: fixed;
overflow: auto;
float: left;
width: 800px;
margin: 0;
padding: 10px;
}
h1 {
color: darkblue;
}
p {
color: navy;
}
#footer {
position: fixed;
left: 0px;
bottom: 0;
height: 150px;
width: 100%;
color: #47037A;
background-color: whitesmoke;
padding: 10px;
font-family: Arial;
}
.footer-contactus {
text-align: left;
}
.footer-copyrights {
text-align: center;
}
.footer-socialm {
text-align: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="header">
<div>
<div class="logo">
<img src="images/logo.jpg" alt="logo" />
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
<div>
<button class="menu-button1">Menu1</button>
<button class="menu-button2">Menu2</button>
<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button class="menu-button3">Menu3</button>
<!-- dropdown menu -->
<div class="dropdown-menu">
Item1
Item2
Item3
Item4
Item5
</div>
</div>
<button class="menu-button4">Menu4</button>
<button class="menu-button5">Menu5</button>
<button class="menu-button6">Menu6</button>
<button class="menu-button7">Menu7</button>
</div>
</div>
<div class="hr-header"></div>
</div>
<div class="content">
Body
</div>
<div id="footer">
<div class="footer-contactus">
email: phone: address
</div>
<div class="footer-copyrights">
Copyright © website 1
</div>
<div class="footer-socialm">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>

There were a lot of bugs in the html structure and css.
1. Never use position to set every element.
2. Your Menu was made up of button which was causing the problem, Always use unorder list (ul li) to make menus.
3. Some divs were not closed properly.
4. No need to write css for repeating elements. You can make a common class and use it again and again.
Below is the correct code structure and css. Also added some animation
to your dropdown so you can now learn some new things too :)
/* Grid View*/
* {
box-sizing: border-box;
}
/* Body Size*/
body {
background-color: white;
//position: relative;
margin-right: 150px;
margin-left: 150px;
margin-top: 20px;
}
/*Header*/
header {
position: fixed;
top: 0;
margin: 80%;
height: 100px;
background-color: whitesmoke;
color: black;
padding: 10px;
text-align: center;
}
/* Header <Logo> Fixed- No Need to make it fix positon as parent already fixed*/
.logo {
float: left;
max-width: 250px;
}
/* Header < Social Bar>*/
.icon-bar {
width: 100px;
overflow: auto;
}
/* Social Icons */
.icon-bar {
float: right;
width: 30%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
top: 100px;
}
.icon-bar a:hover {
background-color: yellow;
}
/* Header <Menu>*/
.menu {
float: left;
width: 65%;
padding: 0px;
margin: 0px;
}
.menu li {
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-family: Arial;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
position: relative;
}
.menu li a {
text-decoration: none;
color: #cccc00;
padding: 8px 20px;
display: block;
border-radius: 6px;
background-color: #47037A;
}
.menu li a:hover {
background-color: #cccc00;
color: #47037A;
}
.dropdown {
position: absolute;
top: 37px;
left: 0px;
padding: 0px;
margin: 0px;
visibility: hidden;
opacity: 0;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.dropdown li {
width: 100%;
margin: 4px 0;
}
.dropdown li a {
background-color: #cccc00;
color: #47037A;
}
.menu li:hover>.dropdown {
visibility: visible;
/* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}
/* Line separate header */
.hr-header {
float: left;
height: auto;
background-color: #47037A;
}
/* Content of Body */
.content {
float: left;
float: left;
width: 800px;
margin: 0 auto;
padding: 10px;
}
h1 {
color: darkblue;
}
p {
color: navy;
}
#footer {
position: fixed;
left: 0px;
bottom: 0;
height: 150px;
width: 100%;
color: #47037A;
background-color: whitesmoke;
padding: 10px;
font-family: Arial;
}
.footer-contactus {
text-align: left;
}
.footer-copyrights {
text-align: center;
}
.footer-socialm {
text-align: right;
}
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/functions.js" type="text/javascript"></script>
<div class="header">
<div class="logo">
<img src="images/logo.jpg" alt="logo" />
</div>
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3
<!---DropDown On hover----->
<ul class="dropdown">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul>
<div class="hr-header"></div>
</div>
<div class="content">
Body
</div>
<div id="footer">
<div class="footer-contactus">
email: phone: address
</div>
<div class="footer-copyrights">
Copyright © website 1
</div>
<div class="footer-socialm">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-search"></i></a>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
</div>

The dropdown menu does not appear correctly

I made this page
* {
box-sizing: border-box;
}
/* Navbar */
nav {
background: #4D636F;
max-height: 51px;
margin: 0;
overflow: hidden;
padding: 0;
}
nav a {
text-decoration: none;
}
nav span.badge {
position: absolute;
font-size: 12px;
top: 5px;
right: 6;
background-color: #4CAF50;
padding: 1px 4px;
border-radius: 50%;
}
nav .logo {
background: #3A4B53;
float: left;
font-size: 18px;
padding: 12px 18px;
color: #fff;
cursor: pointer;
}
nav .logo i {
margin-right: 13px;
}
nav ul {
list-style-type: none;
margin: 0;
padding-top: 12px;
}
nav ul li {
display: inline;
}
nav ul li a {
color: #fff;
padding: 12px 18px;
font-size: 18px;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #444;
background-color: white;
}
nav .right {
float: right;
}
nav .right a img {
width: 25px;
height: 25px;
border-radius: 50%;
margin-bottom: 8px;
}
li.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
padding: 0;
top: 20px;
z-index: 1;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-menu a {
color: #444;
text-align: left;
padding: 0;
display: block;
}
/* Navbar ends */
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="myNav">
<div class="logo">
<span><i class="fa fa-home" aria-hidden="true"></i>Logo</span>
</div>
<ul>
<li><i class="fa fa-globe" aria-hidden="true"></i></li>
<li><i class="fa fa-user" aria-hidden="true"></i></li>
<li><i class="fa fa-envelope" aria-hidden="true"></i></li>
<li class="dropdown">
<a href="#" style="position: relative;"><i class="fa fa-bell"></i>
<span class="badge">3</span>
</a>
<div class="dropdown-menu">
One
One
One
</div>
</li>
<li class="right"><img src="images/profile.png" align="middle"></li>
</ul>
</nav>
The problem as viewed is that the dropdown-menu does not appear correctly.
I made it it absolute and it has z-index : 1 :(
I know that I didn't make it hoverable but I want it to appear then I will handle it.
I don't feel anything wrong with the code, but the output says otherwise.
What I did wrong? And what should I do to make it right?

Your problem is the overflow: hidden in the nav
* {
box-sizing: border-box;
}
/* Navbar */
nav {
background: #4D636F;
max-height: 71px;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
}
nav span.badge {
position: relative;
font-size: 12px;
top: -11px;
height: 15px;
background-color: #4CAF50;
padding: 2px 6px;
border-radius: 50%;
}
nav .logo {
background: #3A4B53;
float: left;
font-size: 18px;
padding: 12px 18px;
color: #fff;
cursor: pointer;
}
nav .logo i {
margin-right: 13px;
}
nav ul {
list-style-type: none;
margin: 0;
line-height: 45px
}
nav ul li {
display: inline;
}
nav ul li a {
color: #fff;
padding: 12px 18px;
font-size: 18px;
transition: all 0.2s ease;
}
nav ul li a:hover {
color: #444;
background-color: white;
}
nav .right {
float: right;
}
nav .right a img {
width: 25px;
height: 25px;
border-radius: 50%;
margin-bottom: 8px;
}
li.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
padding: 0;
top: 31px;
z-index: 1;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}
.dropdown-menu a {
color: #444;
text-align: left;
padding: 0;
display: block;
}
/* Navbar ends */
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="myNav">
<div class="logo">
<span><i class="fa fa-home" aria-hidden="true"></i>Logo</span>
</div>
<ul>
<li><i class="fa fa-globe" aria-hidden="true"></i></li>
<li><i class="fa fa-user" aria-hidden="true"></i></li>
<li><i class="fa fa-envelope" aria-hidden="true"></i></li>
<li class="dropdown">
<a href="#" style="position: relative;"><i class="fa fa-bell"></i>
<span class="badge">3</span>
</a>
<div class="dropdown-menu">
One
One
One
</div>
</li>
<li class="right"><img src="images/profile.png" align="middle"></li>
</ul>
</nav>

.dropdown-menu {
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
padding: 0;
top: 31px;
z-index: 1;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
max-height: 71px;
overflow-y: hidden;
}
.dropdown-menu :hover {
overflow-y: visible;
}
I used that a couple of times on my web page.