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;
}
Related
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]
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm stuck creating a navigation bar. I dont know why the text is out of the bar? Can anyone what is the problem?
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aunty Grocery</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
</body>
</html>
The issue is because the sub-level ul is making all the li taller. To keep the alignment to the top of the ul you need to set vertical-align: top:
nav ul li {
/* other properties... */
vertical-align: top;
}
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
vertical-align: top;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
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>
body {
background: url('nature.jpg') no-repeat;
background-size: none;
margin-left: 10%;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: 7800px;
bottom: 100%;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
}
body {
background-image:url("hintergrundbild.png"),url("hg2.jpg");
background-attachment: scroll,fixed;
background-repeat:no-repeat,no-repeat;
}
html body {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>
Motorräder
</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li id="navi1">Motorradarten
<ul>
<li id="typen">Chopper</li>
<li id="typen">Supersportler</li>
<li id="typen">Naked Bike</li>
<li id="typen">Tourer</li>
<li id="typen">Enduro</li>
</ul></li>
<li id="navi2">Motorradmarken</li>
<li id="navi3">Gefahren & Sicherheit</li>
</ul>
</body>
</html>
Hello guys,
I am trying to make a website with an "drop-up" menu.
The drop-down is working but I cant get it to got upwards.
The Background image kind of works like an intro, that's why the drop-down menu is that far down.
I also want the background to change when I hover over the different menu-points, is that possible?
I hope you guys can help me and if so
Thank you all for your help!
Try to make use of transform: translateY(-100%); to the dropdown
body {
background: url('nature.jpg') no-repeat;
background-size: none;
margin-left: 10%;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
font: 13px Verdana;
}
ul li {
float: left;
width: 160px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
margin-top: 700px;
bottom: 100%;
position: relative;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul {
position: absolute;
top: 0;
left: 0;
width: 160px;
display: none;
transform: translateY(-100%);
}
ul li ul li {
margin: 0;
}
ul li:hover ul {
display: block;
}
body {
background-image: url("hintergrundbild.png"), url("hg2.jpg");
background-attachment: scroll, fixed;
background-repeat: no-repeat, no-repeat;
}
html body {
padding: 0px;
margin: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>
Motorräder
</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li id="navi1">Motorradarten
<ul>
<li id="typen">Chopper</li>
<li id="typen">Supersportler</li>
<li id="typen">Naked Bike</li>
<li id="typen">Tourer</li>
<li id="typen">Enduro</li>
</ul>
</li>
<li id="navi2">Motorradmarken</li>
<li id="navi3">Gefahren & Sicherheit</li>
</ul>
</body>
</html>
I hope this will help you!