I am trying to get the hover to extend all the way across to both sides of the sub-menu. I've tried to rewrite a bunch of elements to no avail. I also used chrome developer tools to try and pin-point the issue. After using chrome dev tools, it seemed like the issue regarding the hover not covering the entire text was with the padding in nav ul li a{. I tried to alter the padding and margin but without success. I've just started coding within the past year and I am a complete loss here.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>WEBSITE</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="logo">
WEBSITE</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>
<label for="btn-1" class="show">ABOUT +</label>
ABOUT
<input type="checkbox" id="btn-1">
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li>LOCATIONS</li>
<li>
<label for="btn-2" class="show">PRODUCTS +</label>
PRODUCTS
<input type="checkbox" id="btn-2">
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>KIDS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALE</li>
</ul>
</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<hr class="hr">
<div class="content">
<section>
<img class="image"src="Vibrant.jpg" alt="Human Jumping In Converses">
</section>
</div>
</body>
</html>
*{
font-family: sans-serif;
margin: 0;
padding: 0;
user-select: none;
}
body{
background: #f2f2f2;
}
nav{
background: white;
}
nav:after{
clear: both;
content: '';
display: table;
}
nav .logo{
color: black;
float: left;
font-family: sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 70px;
padding-left: 120px;
}
nav ul{
float: right;
list-style: none;
margin-right: 60px;
position: relative;
}
nav ul li{
background: white;
display: inline-block;
text-align: center;
}
nav ul li a{
color: rgb(77, 77, 77);
display: inline-block;
font-size: 15px;
line-height: 70px;
margin: 1px;
padding: 0 20px;
text-decoration: none;
}
nav ul li a:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li a:hover{
background: rgb(0, 92, 61);
color: white;
}
nav ul ul{
background-color: rgb(0, 153, 102);
opacity: 0;
position: absolute;
visibility: hidden;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
opacity: 1;
top: 70px;
visibility: visible;
}
nav ul ul li{
background-color: rgb(0, 153, 102);
display: list-item;
font-weight: lighter;
float: none;
position: relative;
width: 100%;
padding: 0;
}
nav ul ul li a{
color: white;
line-height: 50px;
}
nav ul ul ul li{
left: 150px;
position: relative;
top: -60px;
width: 100%;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
.image{
height: 1100px;
width: 2200px;
}
.hr{
background-color: rgb(0, 153, 102);
border: none;
height: 9px;
}
#media all and (max-width: 968px) {
nav ul{
float: left;
margin-right: 0px;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
width: 100%;
}
.show{
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 70px;
padding: 0 10px;
}
.show:hover{
color: black;
}
.icon{
background-color: black;
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 25px;
line-height: 70px;
position: absolute;
right: 40px;
top: 0;
}
nav ul ul{
border-top: 0px;
top: 70px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul li{
position: static;
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
These two values were conflicting with eachother so I re-wrote them:
nav ul li a:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li a:hover{
background: rgb(0, 92, 61);
color: white;
Into this:
nav ul li a.light:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li:hover{
background: rgb(0, 92, 61);
color: white;
}
I assigned the main header links a class of .light, and changed the next css code to just call the list and not the individual link which allows the entire background to change color all the way across.
*{
font-family: sans-serif;
margin: 0;
padding: 0;
user-select: none;
}
body{
background: #f2f2f2;
}
nav{
background: white;
}
nav:after{
clear: both;
content: '';
display: table;
}
nav .logo{
color: black;
float: left;
font-family: sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 70px;
padding-left: 120px;
}
nav ul{
float: right;
list-style: none;
margin-right: 60px;
position: relative;
}
nav ul li{
background: white;
display: inline-block;
text-align: center;
}
nav ul li a{
color: rgb(77, 77, 77);
display: inline-block;
font-size: 15px;
line-height: 70px;
margin: 1px;
padding: 0 20px;
text-decoration: none;
}
nav ul li a.light:hover{
background-color: rgb(0, 153, 102);
color: black;
}
nav ul ul li:hover{
background: rgb(0, 92, 61);
color: white;
}
nav ul ul{
background-color: rgb(0, 153, 102);
opacity: 0;
position: absolute;
visibility: hidden;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
opacity: 1;
top: 70px;
visibility: visible;
}
nav ul ul li{
background-color: rgb(0, 153, 102);
display: list-item;
font-weight: lighter;
float: none;
position: relative;
width: 100%;
padding: 0;
}
nav ul ul li a{
color: white;
line-height: 50px;
}
nav ul ul ul li{
left: 150px;
position: relative;
top: -60px;
width: 100%;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
.image{
height: 1100px;
width: 2200px;
}
.hr{
background-color: rgb(0, 153, 102);
border: none;
height: 9px;
}
#media all and (max-width: 968px) {
nav ul{
float: left;
margin-right: 0px;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
width: 100%;
}
.show{
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 70px;
padding: 0 10px;
}
.show:hover{
color: black;
}
.icon{
background-color: black;
color: rgb(0, 153, 102);
cursor: pointer;
display: block;
font-size: 25px;
line-height: 70px;
position: absolute;
right: 40px;
top: 0;
}
nav ul ul{
border-top: 0px;
top: 70px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul li{
position: static;
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">
WEBSITE
</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn" />
<ul>
<li>
<label for="btn-1" class="show">ABOUT +</label>
<a class="light" href="#">ABOUT</a>
<input type="checkbox" id="btn-1" />
<ul>
<li>OUR STORY</li>
<li>OUR COMMITMENT TO YOU</li>
</ul>
</li>
<li><a class="light" href="#">LOCATIONS</a></li>
<li>
<label for="btn-2" class="show">PRODUCTS +</label>
<a class="light" href="#">PRODUCTS</a>
<input type="checkbox" id="btn-2" />
<ul>
<li>NEW ARRIVALS</li>
<li>FEATURED</li>
<li>TOP RATED</li>
<li>HIS</li>
<li>HERS</li>
<li>KIDS</li>
<li>ACCESSORIES</li>
<li>SPRING CATALOG</li>
<li>THE ESSENTIALS</li>
<li>SALE</li>
</ul>
</li>
<li><a class="light" href="#">BLOG</a></li>
<li><a class="light" href="#">CONTACT</a></li>
</ul>
</nav>
<hr class="hr" />
<div class="content">
<section>
<img class="image" src="Vibrant.jpg" alt="Human Jumping In Converses" />
</section>
</div>
</body>
</html>
Related
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I am new to css. I tried to follow a tutorial and implement it with slight changes. I tried to add a drop down menu using list. but instead of going down, the menu goes sideways. Help please!
I want a collapsible menu.
I would be helpful if you suggest some good sources to learn css
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>
like this. beacuse of "display:inline-block" use in dropdown's li tag.i modify & add some css regarding dropdown.
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
background-image:url("background.png")
}
nav{
background: #179942;
height: 80px;
width: 100%;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active,a:hover{
background:white;
color: #179942;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
nav ul li ul li{
display:none;
}
nav ul li:hover ul li{
display: inline-block;
}
/*CSS FOR DROPDOWN*/
nav ul li > ul {
float: unset;
position: absolute;
top: 80px;
margin: 0;
display: none;
background-color: #179942;
}
nav ul li ul li {
display: block !important;
line-height: 44px;
}
nav ul li:hover > ul {
display: block;
padding: 15px 10px;
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
#media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #179942;
}
#check:checked ~ ul{
left: 0;
}
nav ul li > ul {
position: relative;
top: 0;
left: 0;
background: #2c3e50;
}
nav ul li > ul li {
display: block !important;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Saving Solutions :: Tisaso</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div id="header">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Tisaso.</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Products
<ul>
<li><a href="#" > IT Statement Preperer</a></li>
<li><a href="#" > IT Statement Preperer</a></li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
</nav>
<section></section>
</div>
</body>
</html>
So, I was trying to make a dropdown menu, it works. But when I hover above it, it just appears in front of my Parents menu
I've tried some things like making an inline-block inside the parent's menu and still didn't work, I tried one thing that work that is adding a top: 100% code but it just didn't feel right cuz basically you add space to it and it just didn't feel right
Code:
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
Just add top: 100% for the submenus:
nav ul li ul {
display: none;
position: absolute;
top: 100%;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
This will position it 100% from the top of the relative positioned parent - 100% referring to the height of that parent, so that it will start directly below it.
I have prepared a possible solution to your problem. With some modifications in the HTML, I added some separate classes to make the code more transparent.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
.sub-menu {
position: absolute;
top: 55px;
flex-direction: column;
display: none;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
.about:hover .sub-menu {
left: 70px;
}
.why:hover .sub-menu {
left: 145px;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
display: flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li:hover ul {
display: flex;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul class="main-menu">
<li class="about">About
<ul class="sub-menu">
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li class="why">Why?
<ul class="sub-menu">
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul class="sub-menu">
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
</body>
</html>
There are some points:
In HTML nested tag you should close the inner tag before the outer tag
<li> <a> link tag </a> </li>
Position property can't be used with float. if an element was floated, can't take position and left , top , bottom , right properties.
The better way for layout, is to use display: flex, a powerful feature with less code. (you can read this and this)
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 0px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form name="" method="" action="BUTTON TEST.html">
<input
type="Image"
name="IB1"
src="gradient-coding-logo-template_23-2148809439.jpg"
width="70"
height="60"
/>
</form>
<ul>
<li>
About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>
Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>
Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<li>assd</li>
<li>Contact</li>
</ul>
</nav>
I have my navbar and I have 2 issues. Though it seems to be responsive there's 2 issues. 1. between 968px and about 2001px the list items dont show when clicked or hovered. After around 2000px the list items show. Issue 2. I want the navbar to stick to the top of the page when scrolling down. I tried messing with the positioning but nothing was working for me . this is my code
* {
margin: 0;
padding: 0;
}
nav{
background: #1b1b1b;
display:flex;
justify-content:space-around;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 10px #66ffff;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul{
margin-right: 0px;
float: left;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.show:hover{
color: cyan;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header{
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p{
font-size: 30px;
font-weight: 500;
}
<div>
<nav>
<div class="logo">
Davids Nav</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Web Design</li>
<li>App Design</li>
<li>
<label for="btn-3" class="show">More +</label>
More <span class="fa fa-plus"></span>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
On my browser at 969px viewport width, a media query is causing the <ul> to be hidden. I updated that query and added another one at 700px. You can work on finishing the rest of the media queries for a fully responsive nav.
Next, in order to have the navbar always stick to the top of the viewport while scrolling, add position: fixed along with top: 0
Try this out.
* {
margin: 0;
padding: 0;
}
nav {
position: fixed;
width: 100%;
top: 0;
background: #1b1b1b;
display:flex;
justify-content:space-around;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo{
color: white;
font-size: 27px;
font-weight: 600;
line-height: 70px;
padding-left: 60px;
}
nav ul{
float: right;
margin-right: 40px;
list-style: none;
position: relative;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
line-height: 70px;
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 10px #66ffff;
}
nav ul ul li a:hover{
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul ul ul{
border-top: none;
}
nav ul li:hover > ul{
top: 70px;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0,0,0,0.3);
}
nav ul ul li a{
line-height: 50px;
}
nav ul ul ul li{
position: relative;
top: -60px;
left: 150px;
}
.show,.icon,input{
display: none;
}
.fa-plus{
font-size: 15px;
margin-left: 40px;
}
#media all and (max-width: 968px) {
nav ul {
display: flex;
font-size: 1rem;
}
nav .logo{
padding-left: 30px;
width: 100%;
}
.show + a, ul{
display: none;
}
nav ul li,nav ul ul li{
display: block;
width: 100%;
}
nav ul li a:hover{
box-shadow: none;
}
.show{
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
cursor: pointer;
}
.show:hover{
color: cyan;
}
.icon{
display: block;
color: white;
position: absolute;
top: 0;
right: 40px;
line-height: 70px;
cursor: pointer;
font-size: 25px;
}
nav ul ul{
top: 70px;
border-top: 0px;
float: none;
position: static;
display: none;
opacity: 1;
visibility: visible;
}
nav ul ul a{
padding-left: 40px;
}
nav ul ul ul a{
padding-left: 80px;
}
nav ul ul ul li{
position: static;
}
[id^=btn]:checked + ul{
display: block;
}
nav ul ul li{
border-bottom: 0px;
}
span.cancel:before{
content: '\f00d';
}
}
.content{
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
header{
font-size: 35px;
font-weight: 600;
padding: 10px 0;
}
p{
font-size: 30px;
font-weight: 500;
}
#media only screen and (max-width: 700px) {
nav {
display: flex;
justify-content: center;
align-items: center;
}
nav .logo {
line-height: 40px;
}
}
<div>
<nav>
<div class="logo">
Davids Nav</div>
<label for="btn" class="icon">
<span class="fa fa-bars"></span>
</label>
<input type="checkbox" id="btn">
<ul>
<li>Home</li>
<li>
<label for="btn-1" class="show">Features +</label>
Features
<input type="checkbox" id="btn-1">
<ul>
<li>Pages</li>
<li>Elements</li>
<li>Icons</li>
</ul>
</li>
<li>
<label for="btn-2" class="show">Services +</label>
Services
<input type="checkbox" id="btn-2">
<ul>
<li>Web Design</li>
<li>App Design</li>
<li>
<label for="btn-3" class="show">More +</label>
More <span class="fa fa-plus"></span>
<input type="checkbox" id="btn-3">
<ul>
<li>Submenu-1</li>
<li>Submenu-2</li>
<li>Submenu-3</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
I am trying to design a website with a horizantal navigation bar and with a side bar. The problem started when I added a div (content) which is obstructing the submenu
I am adding the code for your reference. Please help me out
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 50px 120px;
float: left;
}
.nav ul ul {
display: none;
position: fixed;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 160px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 140px;
bottom: 0;
width: 75%;
float: left;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ajax.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<!---header and side bar for user name and logout menu -starts here -->
<div class="header">
<div class="dropdown">
<a class="account">
<?php $y=$ _SESSION[ 'user']; echo "UserID: $y";?>
</a>
<div class="submenu">
<ul class="root">
<li>Dashboard
</li>
<li>Profile
</li>
<li>Settings
</li>
<li>LogOut
</li>
</ul>
</div>
</div>
</div>
<!--header ended here-->
<!--horizantal navigation bar starts here -->
<div class="nav">
<ul>
<li>Home
</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads
</li>
<li>Blog
</li>
<li>News
</li>
<li>Contact US
</li>
</ul>
</div>
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User
</li>
<li class="animate">Domain Password Reset
</li>
<li class="animate">Domain Joining
</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 50px 120px;
float: left;
}
.nav ul ul {
display: none;
position: fixed;
z-index:999;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 160px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 140px;
bottom: 0;
width: 75%;
float: left;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ajax.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<!---header and side bar for user name and logout menu -starts here -->
<div class="header">
<div class="dropdown">
<a class="account">
<?php $y=$ _SESSION[ 'user']; echo "UserID: $y";?>
</a>
<div class="submenu">
<ul class="root">
<li>Dashboard
</li>
<li>Profile
</li>
<li>Settings
</li>
<li>LogOut
</li>
</ul>
</div>
</div>
</div>
<!--header ended here-->
<!--horizantal navigation bar starts here -->
<div class="nav">
<ul>
<li>Home
</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads
</li>
<li>Blog
</li>
<li>News
</li>
<li>Contact US
</li>
</ul>
</div>
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User
</li>
<li class="animate">Domain Password Reset
</li>
<li class="animate">Domain Joining
</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
You simply need to increase the z-index of the submenu, by e.g. adding
.nav ul ul{
z-index:99;
}
The z-index property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Although a value of 99 is likely excessive in this case, z-index effectively dictates the layering precedence of the element in question. note that in order to apply, the element will also need a position set (which your sub menu's already have)
Add
.content{
z-index: -100;
}
The content was like becoming an overlay on your dropdown menu item. So the cursor active scope was getting lost.
or add z-index in positive value for the menu