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>
Related
There I am having a problem with the size of the link.
I have no idea how to make it smaller, and whenever I do. I end up making it move or disappear.
I followed the tutorial off of Danni Crossing, on how to make a drop-down menu. But the problem is... The button clicking range is way too big and I just want to make it smaller.
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 20px;
}
.WHAT {
font-size: 55px;
position: relative; left: 555px; bottom: 20px;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
You need to change in .Nav change height: 60px; padding-bottom: 15px; and change line-height: 23px; in .ul li
change the .WOW and .WHAT
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
position: relative; right: 255px; bottom: 38px;
padding-top: 55px;
line-height: 95% !important;
}
.WHAT {
font-size: 55px;
position: relative;
left: 555px;
bottom: 31px;
padding-top: 65px;
line-height: 10% !important;
}
.HOW {
font-family: atlantis;
color: black;
position: relative; left: 1369px; top: 60px;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 60px;
background-color: #b5a371;
padding-bottom: 15px;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
padding: 22px 320px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 23px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
Removed position: relative; right: 255px; bottom: 20px; from .WOW .WHAT .HOW and padding: 22px 320px; from nav ul li a and now it looks nicer. The rest of your CSS is very messy though.
#font-face {
font-family: atlantis;
src: url(FONTS/AtlantisInternational-jen0.ttf);
}
#font-face {
font-family: WHY;
src: url(FONTS/seguisb.ttf);
}
.WOW {
font-family: WHY;
font-size: 55px;
}
.WHAT {
font-size: 55px;
}
.HOW {
font-family: atlantis;
color: black;
}
/*font separation*/
*{
margin: 0;
padding: 0;
}
body {
background-color: #fbfbfb;
}
nav {
width: 100%;
height: 100px;
background-color: #b5a371;
}
nav p {
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 25px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style-type: none;
position: relative;
}
nav ul li a {
display: block;
font-family: atlantis;
color: rgb(255, 255, 255);
font-size: 20px;
}
nav ul li ul {
display: none;
position: absolute; top: 99px;
background-color: #370d02;
padding: 10px;
border-radius: 9px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
padding: 8px 14px;
background-color: #98652c;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0 20px;
}
<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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a class="WOW" href="index.html">Home!</a><ul>
<li>ADD IMAGE</li>
<li>ADD IDLE </li>
<li>APPEARENCE</li>
<li>SETTINGS</li>
</ul>
</li>
<li><a class="WHAT" href="#">Log in</a></li>
<li><a class="HOW" href="#">Make a pocket!</a></li>
</ul>
</nav>
</body>
</html>
Hey my navigation bar is not working properly in mobile viewIt is supposed to hide it and also show the empty area first and then when the menu is clicked its supposed to show the things which the code says but its not showing the empty area(the blank website page) first and when menu clicked its also not hiding it
The Code:
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700%display=swap');
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
height: 80px;
background: #1b1b1b;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 50px 0px 100px;;
}
nav .logo{
font-size: 33px;
color: #fff;
font-weight: 600;
}
nav ul{
display: flex;
list-style: none;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
padding: 8px 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
nav ul li a:hover,
nav ul li a.active{
color: #1b1b1b;
background: #fff;
}
nav .menu-btn i{
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
#media (max-width: 940px) {
nav .menu-btn i{
display: block;
}
nav ul{
position: fixed;
top: 80px;
left: 0;
background: #111;
height: 100vh;
width: 100%;
display: block;
text-align: center;
}
#click:checked ~ ul{
left: 0%;
}
nav ul li{
margin: 40px 0;
}
nav ul li a{
font-size: 20px;
}
nav ul li a:hover,
nav ul li a.active{
color: cyan;
background: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="logo">Brand</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Feedback</li>
</ul>
</nav>
</body>
</html>
So yea how should i fix this
Thanks in advance
bro you did a mistake on #click:checked this part if you want select the input tag who checked you should do that from this way input[type=checkbox]
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>
I am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I'm having problems where my dropdown menu made with CSS and HTML will force a linebreak and the dropdown menu will glitch out. You can see this problem by running my code.
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Home
</li>
<li>
About Us <i class="fa fa-angle-down" aria-hidden="true"></i>
</li>
<li>
Bolivia
</li>
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
Whenever you hover over "products" the code glitches out and forces a line break. I want to make it so that it doesnt affect the flow of the document. I've already tried to set the float to left and that didn't work.
Thank you!
Instead of position: static; on .dropdown I would go with position:absolute
You will need to iron out some padding and margin of your ul and li tags for proper fit
add position:relative to .dropdown li
See snippet below (I took out some menu items to ensure proper inspection of your product sub-menu where the issue lies)
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
padding: 0;
}
.dropdown li {
margin: 0px;
list-style-type: none;
position: relative;
left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 40px;
padding-left: 40px;
background: #f2f2f2;
}
.main-nav {
position: relative;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Hind:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="copla.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Copla</title>
</head>
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
</body>
</html>