I've added a dropdown nav on my site. The dropdown menu itself works fine but when i add new content to the side for example just some paragraphs the new content appears inside the dropdown menu. I've included the code and please give me any feedback. I'm fairly new to web development so don't flame me too hard.
html{
background: url(background.jpg) no-repeat center fixed;
background-size: cover;
}
.title{
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 25pt;
color: black;
padding-top: 2ch;
padding-left: 3rem;
}
/* Dropdown Button */
.dropbtn {
background-color: #000000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
float: right;
display: flex;
align-items: flex-end;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
float: right;
padding-right: 2rem;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
background-color: #70868a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: 'Roboto Condensed', sans-serif;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: black;}
.name{
display: flex;
justify-content: left;
font-family: 'Roboto Condensed', sans-serif;
padding-left: 3rem;
}
.moving-words{
display: flex;
align-self: center;
justify-content: center;
padding-top: 10rem;
font-size: 35pt;
font-family: 'Alfa Slab One', cursive;
text-shadow: 5px 5px rgb(99, 151, 185);
}<!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>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">TOWN CO.</div>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<div class="name">Temuulen Batbayar</div>
<div class="moving-words">FRONTEND DELEVOPMENT UI</div>
<div class="home"><a href="homepage.html">Home</a></div>
<div class="dropdown">
<button class="dropbtn">...</button>
<div class="dropdown-content" id="navbarToggleExternalContent">
<a href="about.html">About</a>
<a href="portfolio.html">Portfolio</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</body>
<footer>
<ul class="footer-links">
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
</footer>
</html>You forgot to close your divs just add </div></div>
Check the snippet
And the footer should be inside body tag not outside.
html{
background: url(background.jpg) no-repeat center fixed;
background-size: cover;
}
.title{
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 25pt;
color: black;
padding-top: 2ch;
padding-left: 3rem;
}
/* Dropdown Button */
.dropbtn {
background-color: #000000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
float: right;
display: flex;
align-items: flex-end;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
float: right;
padding-right: 2rem;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
background-color: #70868a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: 'Roboto Condensed', sans-serif;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: black;}
.name{
display: flex;
justify-content: left;
font-family: 'Roboto Condensed', sans-serif;
padding-left: 3rem;
}
.moving-words{
display: flex;
align-self: center;
justify-content: center;
padding-top: 10rem;
font-size: 35pt;
font-family: 'Alfa Slab One', cursive;
text-shadow: 5px 5px rgb(99, 151, 185);
}<!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>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">TOWN CO.</div>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<div class="name">Temuulen Batbayar</div>
<div class="moving-words">FRONTEND DELEVOPMENT UI</div>
<div class="home"><a href="homepage.html">Home</a></div>
<div class="dropdown">
<button class="dropbtn">...</button>
<div class="dropdown-content" id="navbarToggleExternalContent">
<a href="about.html">About</a>
<a href="portfolio.html">Portfolio</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact</a>
</div>
</div>
<footer>
<ul class="footer-links">
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
<li><a href="">Lorem ipsum dolor sit amet.</a></li>
</footer>
</body>
</html>