Hi guys! I’ve never been good at CSS but I wanted to try it a bit more and create a website. I’m trying make a drop down floated to the right. There’s only tab (shannon) but there are two more that i’ll add.
The drop down I have attempted to make isn’t aligning with the rest of the menu elements and the menu isn’t below the nav bar.
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/3bcfb64169.js" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "style.css">
<title>Site | Home</title>
</head>
<body>
<!--HEADER-->
<header>
<div id = "logo">
<h1 class = "logo-text">Site</h1>
</div>
<!--NAV-->
<i class = "fa fa-bars menu-toggle"></i>
<nav class = "nav">
<ul class = "nav-links">
<div class = "main-links">
<li><a href = "#">A</a></li>
<li><a href = "#">B</a></li>
<li><a href = "#">C</a></li>
<li><a href = "#">D</a></li>
<li><a href = "#">E</a></li>
<li><a href = "#">F</a></li>
<li><a href = "#"> G</a></li>
</div>
<div class = "info">
<div class = "info-links">
<!--
<li><a href = "#">Sign Up</a></li>
<li><a href = "#">Login</a></li>
-->
<li><a href = "#" class = "name">Shannon</a></li>
</div>
<ul class = "dropdown">
<li><a href = "#">
Dashboard
</a></li>
<li><a href = "#" class = "logout">Logout</a></li>
</ul>
</div>
</ul>
</nav>
<!--/NAV-->
</header>
<!--/HEADER-->
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
background-color: #f6f6f6;
}
header {
background-color: #252323;
color: white;
height: 105px;
}
.menu-toggle {
display: none;
}
#logo {
display: flex;
width: 100%;
height: 50%;
align-items: center;
justify-content: center;
}
nav {
display: flex;
width: 100%;
height: 50%;
color: white;
margin: 0;
padding: 0;
}
.nav-links {
align-items:center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.main-links {
float: left;
display: flex;
height: 100%;
width: 70%;
justify-content: space-evenly;
align-items: center;
}
.main-links li {
margin: 1rem;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
}
.main-links li:hover {
background-color: red;
}
.info-links {
width: 100%;
height: 100%;
display: flex;
float: right;
justify-content: space-evenly;
align-items: center;
border: 1px solid red;
margin: 0;
padding: 0;
}
.dropdown {
display: flex;
top: 105px;
display: block;
padding: 21px;
border: 1px solid red;
float: right;
}
a {
text-decoration: none;
color: white;
}
ul {
list-style-type: none;
display: flex;
}
li {
display: flex;
justify-content: space-evenly;
}