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]
Related
I've been trying to figure out what is why the dropdown menu isnt changing from display: none; into display: block; when i hover over it.
I briefly looked at a dropdown menu CSS tutorial just to get a basic understanding on how it works but after watching it a few times i have no clue what is not working
P.S i am relatively new to this stuff
Code:
<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>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
.navbar ul li{
display: inline-flex;
margin-left: 8rem;
list-style: none;
color: white;
padding: .5rem;
border-radius: 1rem;
}
.navbar{
background: rgb(0, 120, 0);
padding: 1.25rem;
font-size: larger;
text-decoration: none;
}
.navbar:link{
text-decoration: none;
}
a{
text-decoration: none;
color: white;
font-family: sans-serif;
}
.navbar ul li:hover{
background: rgba(0, 0, 0, 0.7);
}
.drop-1{
display: none;
background-color: darkgreen;
position: absolute;
left: 6rem;
}
.drop-1 a{
color: lightgreen;
}
.drop-1 ul li{
border-bottom: 1px solid black;
padding-bottom: .5rem;
padding-top: .5rem;
padding-left: 1rem;
padding-right: 1rem;
display: block;
}
.drop-1 ul li:last-child{
border: none;
}
.drop-1 ul li:first-child{
border-top: 1px solid black;
}
.navbar ul li:hover .drop-1{
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</body>
</html>```
The dropdown must be in the structure of your styles. You have this style:
.navbar ul li:hover .drop-1{
display: block;
}
Which means that you have a class navbar, and then ul with some li and, "inside" an element with a drop-1 class. When you are hover that li, then your drop-1 element will be visible.
If you put a dropdown inside some li of your navbar, you can see the dropdown.
<div class="navbar">
<ul>
<li>
Test1
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
You need one dropdown for each menú in your navbar.
UPDATE
Well, maybe a bit difficult at first but the concept is always the same. Check this:
a span {
// Any span inside a link will be hidden by default
display: none;
}
a:hover span {
// but when you are hover the link, the span will be visible
display: block;
}
<a>Always visible <span>Visible only on hover</span></a>
The CSS it's applied to the span but the "hover" of the link it's who change the display of the span.
Here your code fixed. Besides Victor clarification there are a few more things you could solve about the code. I paste it here if you want to copy it.
* {
margin: 0;
padding: 0;
border: 0;
}
.navbar ul li {
display: inline-flex;
position: relative;
margin-left: 8rem;
list-style: none;
color: white;
padding: .5rem;
border-radius: 1rem;
}
.navbar {
background: rgb(0, 120, 0);
padding: 1.25rem;
font-size: larger;
text-decoration: none;
}
.navbar:link {
text-decoration: none;
}
a {
text-decoration: none;
color: white;
font-family: sans-serif;
}
.navbar ul li:hover {
background: rgba(0, 0, 0, 0.7);
}
.drop-1 {
display: none;
background-color: darkgreen;
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
z-index: 1;
}
.drop-1 a {
color: lightgreen;
}
.drop-1 ul li {
border-bottom: 1px solid black;
padding-bottom: .5rem;
padding-top: .5rem;
padding-left: 1rem;
padding-right: 1rem;
display: block;
}
.drop-1 ul li:last-child {
border: none;
}
.drop-1 ul li:first-child {
border-top: 1px solid black;
}
.navbar ul li:hover .drop-1 {
display: block;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>
Test1
<div class="drop-1">
<ul>
<li>dropdown1</li>
<li>dropdown2</li>
<li>dropdown3</li>
<li>dropdown4</li>
<li>dropdown5</li>
</ul>
</div>
</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</div>
</body>
</html>
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>
I don't know what's wrong with my code, I followed a tutorial on youtube to create a navbar with html and css. But, my design shows a gap between dropdown and the parent ul
I've looking for the answer in StackOverflow, trying the answer I found in StackOverflow, but it doesn't work either.
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
padding: 0px;
margin: 0px;
}
header {
background-color: #217e6a;
height: 66px;
color: white;
}
header * {
color: white;
}
header .logo {
padding-left: 2em;
padding-right: 2em;
float: left;
height: inherit;
background-color: #0f5042;
}
header .logo-text {
margin: 5px;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative;
border: 1px solid red;
vertical-align: top;
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 200px;
display: none;
background-color: #217e6a;
border: 1px solid black;
vertical-align: top;
}
header ul li:hover ul {
display: block;
transition: 0.5s;
}
header ul li ul li {
width: 100%;
}
headerulli ul li:hover {
background-color: #0f5042;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
}
header ul li a:hover {
background-color: #0f5042;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/admin.css">
</head>
<body>
<header>
<div class="logo">
<div class="logo-text">
<h1>COVID-19 BJN</h1>
</div>
</div>
<ul>
<li>
Profile
<ul>
<li>
Profile
</li>
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
That's my code. Please help me how to fix that. Thanks
The a tag should have the height that is why you don't see full height.
NOTE: If you use a border then you have to decrease a pixel property to height since the border will fill that content, so you have to toggle between that requirement and should decide what is needed.
* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
padding: 0px;
margin: 0px;
}
header {
background-color: #217e6a;
height: 65px;
color: red;
}
header * {
color: white;
}
header .logo {
padding-left: 2em;
padding-right: 2em;
float: left;
height: inherit;
background-color: #0f5042;
}
header .logo-text {
margin: 5px;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative;
border: 0px solid red;
vertical-align: top;
}
header ul li ul {
position: absolute;
top: 65px;
right: 0px;
width: 200px;
display: none;
background-color: #217e6a;
border: 1px solid black;
vertical-align: top;
}
header ul li:hover ul {
display: block;
transition: 0.5s;
}
header ul li ul li {
width: 100%;
}
headerulli ul li:hover {
background-color: #0f5042;
}
header ul li a {
display: block;
padding: 21px;
font-size: 1.1em;
text-decoration: none;
height: 65px;
}
header ul li a:hover {
background-color: #0f5042;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url() ?>assets/css/admin.css">
</head>
<body>
<header>
<div class="logo">
<div class="logo-text">
<h1>COVID-19 BJN</h1>
</div>
</div>
<ul>
<li>
Profile
<ul>
<li>
Profile
</li>
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</header>
</body>
</html>
The issue is here
header ul li ul {
position: absolute;
top: 65px;
right: 0px;
width: 200px;
display: none;
background-color: #217e6a;
border: 1px solid black;
vertical-align: top;
}
You have the absolute positioning too low down, just change the top and make it slightly higher and the gap will be gone.
whenever I zoom in on my webpage my navbar will go out of screen, when zooming out it's fine, is there maybe an attribute that will make it stay still when zooming/out or are there any other alternatives to fixing this?
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0, 0, 0, 0.8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor:pointer;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: #282e34;
z-index: 1;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Hardware</a></li>
<li><a>Software</a>
<ul>
<li><a>System software</a></li>
<li><a>Application software</a></li>
</ul>
</li>
</li>
<li><a>General Computers</a>
<ul>
<li><a>Types of computers</a></li>
<li><a>History of computers</a></li>
</ul>
</li>
<li><a>Credits</a></li>
</ul>
</nav>
</body>
</html>
Thanks in advance.
.........................................................................
Could be because the nav has min-width:1200px;. If your screen size is less than 1200px then the navbar will bleed off the page and cause horizontal scroll.
I also changed the fixed width of the nav li elements to width:20% so they will shrink and grow with the nav.
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0, 0, 0, 0.8);
/* min-width: 1200px; */
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
/* width: 210px; */
width:20%;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor:pointer;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: #282e34;
z-index: 1;
position: relative;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Hardware</a></li>
<li><a>Software</a>
<ul>
<li><a>System software</a></li>
<li><a>Application software</a></li>
</ul>
</li>
</li>
<li><a>General Computers</a>
<ul>
<li><a>Types of computers</a></li>
<li><a>History of computers</a></li>
</ul>
</li>
<li><a>Credits</a></li>
</ul>
</nav>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I've got problem with alignment of CSS navbar even tho I have specified that ALL rules should revert to zero.
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .3s;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
height: 100px;
padding: 10px 100px;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
transition: .3s;
}
nav.black .logo {
color: #ffffff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a{
list-style: none;
margin: 20px;
}
nav ul li a {
line-height: 80px;
color: #151515;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav.black ul li a {
color: #ffffff;
}
nav ul li a:focus{
outline: none;
list-style: none!important;
}
nav ul li a.active {
color: #ee0000;
}
a:hover {
list-style: none!important;
text-decoration: none!important;
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.dropdown {
all: unset;
left:auto;
right:0;
margin-right:-10px;
margin-top: 30px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Picture Lover</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="assets/main.css" />
<script src="assets/main.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header class="nav-header">
<nav>
<div class="logo">logo</div>
<ul>
<li>Projects
<ul>
<li><a class="dropdown" href="#">Nature pictures</a></li>
<li><a class="dropdown" href="#">Animal pictures</a></li>
<li><a class="dropdown" href="#">Other pictures</a></li>
</ul>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
That's everything what I got. When you hover on Projects, the dropdown menu appears on right side of the screen " ->" instead of appearing below "↓".
I have used "all: unset" on the dropdown, to reset all the things applied to him yet it taken no positive effect ;(.
This is happening because the element you are showing on hover is relative positioned and of course it is added according to it markup in html eg. next to Projects. It has nothing to do with setting all to unset. And I would advise against using all because it has no browser support.
You can find a working copy of your code below.
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .3s;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
height: 100px;
padding: 10px 100px;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
transition: .3s;
}
nav.black .logo {
color: #ffffff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
position:relative;
}
nav ul li a{
list-style: none;
margin: 20px;
}
nav ul li a {
line-height: 80px;
color: #151515;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav.black ul li a {
color: #ffffff;
}
nav ul li a:focus{
outline: none;
list-style: none!important;
}
nav ul li a.active {
color: #ee0000;
}
a:hover {
list-style: none!important;
text-decoration: none!important;
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.dropdown-container{
position:absolute;
align-items: center;
justify-content: center;
flex-direction: column;
}
.dropdown {
all: unset;
left:auto;
right:0;
margin-right:-10px;
margin-top: 30px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Picture Lover</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="assets/main.css" />
<script src="assets/main.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header class="nav-header">
<nav>
<div class="logo">logo</div>
<ul>
<li>Projects
<ul class="dropdown-container">
<li><a class="dropdown" href="#">Nature pictures</a></li>
<li><a class="dropdown" href="#">Animal pictures</a></li>
<li><a class="dropdown" href="#">Other pictures</a></li>
</ul>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
Try this.
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .3s;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
height: 100px;
padding: 10px 100px;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
transition: .3s;
}
nav.black .logo {
color: #ffffff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a{
list-style: none;
margin: 20px;
}
nav ul li a {
line-height: 80px;
color: #151515;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav.black ul li a {
color: #ffffff;
}
nav ul li a:focus{
outline: none;
list-style: none!important;
}
nav ul li a.active {
color: #ee0000;
}
a:hover {
list-style: none!important;
text-decoration: none!important;
}
.dropdown-list {
display: none;
}
ul li:hover {
text-align: right;
}
ul li:hover .dropdown-list {
list-style: none;
float: right;
display: flex;
flex-flow: column nowrap;
text-align: right;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Picture Lover</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="assets/main.css" />
<script src="assets/main.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header class="nav-header">
<nav>
<div class="logo">logo</div>
<ul>
<li>Projects
<ul class="dropdown-list">
<li><a class="dropdown" href="#">Nature pictures</a></li>
<li><a class="dropdown" href="#">Animal pictures</a></li>
<li><a class="dropdown" href="#">Other pictures</a></li>
</ul>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
try something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Picture Lover</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="assets/main.css" />
<script src="assets/main.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header class="nav-header">
<nav>
<div class="logo">logo</div>
<ul>
<li>Projects
<ul>
<li><a class="dropdown" href="#">Nature pictures</a></li>
<li><a class="dropdown" href="#">Animal pictures</a></li>
<li><a class="dropdown" href="#">Other pictures</a></li>
</ul>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
Css:
body {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .3s;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
height: 100px;
padding: 10px 100px;
}
nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
transition: .3s;
}
nav.black .logo {
color: #ffffff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
position: relative;
}
nav ul li a{
list-style: none;
margin: 20px;
}
nav ul li a {
line-height: 80px;
color: #151515;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
}
nav.black ul li a {
color: #ffffff;
}
nav ul li a:focus{
outline: none;
list-style: none!important;
}
nav ul li a.active {
color: #ee0000;
}
a:hover {
list-style: none!important;
text-decoration: none!important;
}
ul li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
}
ul li:hover ul {
display: block;
}
.dropdown {
all: unset;
left:auto;
right:0;
margin-right:-10px;
margin-top: 30px;
float: left;
}