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>
Related
I want the links to cover area from top to bottom of navigation bar what is happening on all the links except the Dropdown one.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="This is a example site for nav design">
<title>
Navbar
</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
background-color: #f1f5f9;
flex-wrap: wrap;
width: 100%;
box-shadow: 0rem .15rem .25rem #94a3b8;
}
.nav {
margin-left:10%;
margin-right:10%;
}
.nav a {
text-decoration: none;
font-size: 18px;
color: #1e293b;
font-weight: 600;
padding: 1rem;
}
nav ul {
display: flex;
justify-content: right;
list-style-type: none;
margin: 0;
}
nav ul li {
padding: 1rem;
}
.nav a:hover, .nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.nav .dropdown {
overflow: hidden;
margin: 0;
}
.nav .dropdown .dropbtn {
padding: 0;
margin: 0;
font-size: 18px;
font-weight: 600;
border: none;
outline: none;
color: #1e293b;
background-color: inherit;
font-family: inherit;
}
.dropdown-items {
display: none;
position: absolute;
background-color: #f1f5f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nopadding {
padding: 0;
}
.nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.dropdown-items a {
float: none;
color: #6b7280;
padding: 1rem 1rem 1rem 1rem;
text-decoration: none;
display: block;
text-align: left;
box-shadow: 0px .15rem .15rem #e2e8f0;
}
.dropdown-items a:hover {
color: #1e293b;
background-color: #f8fafc;
}
.dropdown:hover .dropdown-items {
display: block;
}
</style>
<!--
<script type="text/javascript" src="https://livejs.com/live.js"></script>
-->
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>Home</li>
<li>Content</li>
<li>
<div class="dropdown">
<button class="dropbtn">Social</button>
<div class="dropdown-items">
Instagram
Twitter
Facebook
Youtube
</div>
</div>
</li>
<li>About us</li>
</ul>
</div>
</nav>
</body>
</html>
It is working as intended if I change the third list tag and place is just before the Social link.
<nav>
<div class="nav">
<ul>
<li>Home</li>
<li>Content</li>
<div class="dropdown">
<button class="dropbtn">
<li>Social</li>
</button>
<div class="dropdown-items">
Instagram
Twitter
Facebook
Youtube
</div>
</div>
<li>About us</li>
</ul>
</div>
</nav>
It's working but I am not sure if it is a good way like adding other tags before list tag for a list item and when I run lighthouse test it also says list tag requires unordered list tag and cannot be used alone.
So I want to know, If there is a way to get the desired functionality of the lator Html code through Css.
After some changes I got the results I wanted.
New code:
* {
margin: 0;
padding: 0;
}
nav {
background-color: #f1f5f9;
flex-wrap: wrap;
width: 100%;
box-shadow: 0rem .15rem .25rem #94a3b8;
}
.nav {
margin-left:15%;
margin-right:15%;
}
.nav a {
text-decoration: none;
font-size: 18px;
color: #1e293b;
font-weight: 600;
padding: 1rem;
}
nav ul {
display: flex;
align-items: center; /* Aligned items in center of navbar */
justify-content: right;
list-style-type: none;
}
/* Removed nav ul li padding of 1rem */
.nav a:hover, .nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.nav .dropdown {
overflow: hidden;
margin: 0;
}
.nav .dropdown .dropbtn {
padding: 1rem; /* Added padding to dropdown button */
margin: 0;
font-size: 18px;
font-weight: 600;
border: none;
outline: none;
color: #1e293b;
background-color: inherit;
font-family: inherit;
}
.dropdown-items {
display: none;
position: absolute;
background-color: #f1f5f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nopadding {
padding: 0;
}
.nav .dropdown:hover .dropbtn {
color: #6b7280;
}
.dropdown-items a {
float: none;
color: #6b7280;
padding: 1rem 1rem 1rem 1rem;
text-decoration: none;
display: block;
text-align: left;
box-shadow: 0px .15rem .15rem #e2e8f0;
}
.dropdown-items a:hover {
color: #1e293b;
background-color: #f8fafc;
}
.dropdown:hover .dropdown-items {
display: block;
}
<body>
<nav>
<div class="nav">
<ul>
<li>Home</li>
<li>Content</li>
<li>
<div class="dropdown">
<button class="dropbtn">Social</button>
<div class="dropdown-items">
Instagram
Twitter
Facebook
Youtube
</div>
</div>
</li>
<li>About us</li>
</ul>
</div>
</nav>
</body>
Removed padding from unordered list items.
Added align-items center to unordered list to center the items on navbar.
Added 1rem padding to dropbtn class.
I'm making a menu. I want to justify the last 3 items of the menu to the right.
I want to do as in this picture:
I was able to do it like this:
I could not justify the items written Item 1, Item 2 and Item 3 to the right. How can I do that? Thank you in advance for your help.
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.navbar ul {
display: flex;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul li {
display: inline;
margin-left: 30px;
}
.navbar ul li:first-child {
margin-left: 0px;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
color: #979797;
}
.navbar ul li a:hover {
color: #222429;
}
.navbar ul li img {
height: 50px;
}
.navbar ul li .dropbtn {
color: #979797;
line-height: 50px;
font-size: 16px;
border: none;
}
.navbar ul li .dropdown .dropdown-content {
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 0px 12px;
text-decoration: none;
display: block;
margin-left: 0px;
}
.navbar ul li .dropdown .dropdown-content a:hover {
background-color: #ddd;
}
.navbar ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #222429;
}
.arrow {
border: solid #979797;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 6px;
}
.arrow:hover {
border: solid #222429;
border-width: 0 3px 3px 0;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.down:hover {
transform: rotate(224deg);
-webkit-transform: rotate(224deg);
}
.navbar ul li a:last-child(3) {
float: right;
}
<!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>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<img src="./img/logo.png">
</li>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>
<div class="dropdown">
<button class="dropbtn">More <i class="arrow down"></i></button>
<div class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
Add this rule:
.navbar > ul > li:nth-last-child(3) {
margin-left: auto;
}
By applying margin-left: auto; it determines that the third-last li and all following flex items are moved as far right as possible inside the flex container.
(note: You have to switch to "full page" view here in the snippet window to see the result properly)
body {
font-family: Poppins;
background-color: #F5F6F6;
}
.navbar ul {
display: flex;
justify-content: space-between;
}
.container {
width: 70%;
margin: 0 auto;
}
.top-space {
height: 25px;
}
.navbar ul li {
display: inline;
margin-left: 30px;
}
.navbar ul li:first-child {
margin-left: 0px;
}
.navbar ul li a {
text-decoration: none;
line-height: 50px;
color: #979797;
}
.navbar ul li a:hover {
color: #222429;
}
.navbar ul li img {
height: 50px;
}
.navbar ul li .dropbtn {
color: #979797;
line-height: 50px;
font-size: 16px;
border: none;
}
.navbar ul li .dropdown .dropdown-content {
display: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 0px 12px;
text-decoration: none;
display: block;
margin-left: 0px;
}
.navbar ul li .dropdown .dropdown-content a:hover {
background-color: #ddd;
}
.navbar ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #222429;
}
.arrow {
border: solid #979797;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 6px;
}
.arrow:hover {
border: solid #222429;
border-width: 0 3px 3px 0;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.down:hover {
transform: rotate(224deg);
-webkit-transform: rotate(224deg);
}
.navbar > ul > li:nth-last-child(3) {
margin-left: auto;
}
<!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>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="./style/reset.css">
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<div class="container">
<div class="top-space"></div>
<div class="navbar">
<ul>
<li>
<img src="./img/logo.png">
</li>
<li>Vectors</li>
<li>Photos</li>
<li>PSD</li>
<li>Video</li>
<li>
<div class="dropdown">
<button class="dropbtn">More <i class="arrow down"></i></button>
<div class="dropdown-content">
Item 1
Item 2
Item 3
</div>
</div>
</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
</body>
</html>
The dropdown menu appeared just fine. But the when hovering over the "Mobile" and "Email" link the submenu got shifted to the right. Here is a CodePen link
and below the code snippet :
div > ul > li {
list-style: none;
display: inline-block;
margin: 0 20px;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
position: relative;
}
ul > li > a {
text-decoration: none;
color: white;
}
.sub-menu {
position: absolute;
display: none;
}
ul > li:hover > .sub-menu {
display: block;
background-color: white;
margin: 0px;
padding-left: 10px;
width: 400px;
height: 200px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu > li > a {
color: orangered;
padding: 0 10px;
}
.sub-menu > li:hover > a:hover {
color: white;
background-color: orangered;
padding: 0 200px;
margin: 0 200px;
border-radius: 10px;
float: left;
}
ul > li > a:hover {
color: yellow;
}
div {
background-color: orangered;
height: 100px;
text-align: center;
line-height: 100px;
}
<div>
<ul>
<li>Home </li>
<li>Intro </li>
<li>
Contact
<ul class="sub-menu">
<li>Mobile</li>
<li>Email</li>
</ul>
</li>
<li>Help </li>
<li>Q&A </li>
</ul>
</div>
I did try to put the submenu in another <div\> but the result was still the same (or maybe I'm just stupid).
the issue come from the selector .sub-menu > li:hover > a:hover
where you put padding and margin on hover
i also delete the float but i let you give item your expected design
.sub-menu > li:hover > a:hover {
color: white;
background-color: orangered;
border-radius: 10px;
}
div > ul > li {
list-style: none;
display: inline-block;
margin: 0 20px;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
position: relative;
}
ul > li > a {
text-decoration: none;
color: white;
}
.sub-menu {
position: absolute;
display: none;
}
ul > li:hover > .sub-menu:hover {
background: orange;
}
ul > li:hover > .sub-menu {
display: block;
background-color: white;
margin: 0px;
padding-left: 10px;
width: 400px;
height: 200px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu > li > a {
color: orangered;
padding: 0 10px;
}
.sub-menu > li:hover > a:hover {
color: white;
background-color: orangered;
border-radius: 10px;
}
ul > li > a:hover {
color: yellow;
}
div {
background-color: orangered;
height: 100px;
text-align: center;
line-height: 100px;
}
<!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>
<link rel="stylesheet" href="CSS/Bai2.css" />
</head>
<body>
<div>
<ul>
<li>Home </li>
<li>Intro </li>
<li>
Contact
<ul class="sub-menu">
<li>Mobile</li>
<li>Email</li>
</ul>
</li>
<li>Help </li>
<li>Q&A </li>
</ul>
</div>
</body>
</html>
If you want to have background color on one sub-menu line when you hover <a> one way can be to use selector .sub-menu>li:hover
div>ul>li {
list-style: none;
display: inline-block;
margin: 0 20px;
font-weight: bolder;
font-size: large;
font-variant: small-caps;
position: relative;
}
ul>li>a {
text-decoration: none;
color: white;
}
.sub-menu {
position: absolute;
display: none;
}
ul>li:hover>.sub-menu:hover {
background: orange;
}
ul>li:hover>.sub-menu {
display: block;
background-color: white;
margin: 0px;
padding-left: 0;
z-index: 9;
width: 400px;
height: 200px;
box-shadow: 0 0 10px;
border-radius: 10px;
list-style-type: none;
text-align: left;
}
.sub-menu>li>a {
color: orangered;
padding: 0 10px;
}
.sub-menu>li:hover {
background-color: orangered;
color: yellow;
border-radius: 10px;
border: solid 1px;
}
.sub-menu>li:hover>a {
color: white;
}
ul>li>a:hover {
color: yellow;
}
div {
background-color: orangered;
height: 100px;
text-align: center;
line-height: 100px;
}
<!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>
<link rel="stylesheet" href="CSS/Bai2.css" />
</head>
<body>
<div>
<ul>
<li>Home </li>
<li>Intro </li>
<li>
Contact
<ul class="sub-menu">
<li>Mobile</li>
<li>Email</li>
</ul>
</li>
<li>Help </li>
<li>Q&A </li>
</ul>
</div>
</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 a beginner at html and I am trying to begin working on my online portfolio, I have gotten the nav bar set up and now I am trying to make a drop down menu from the nav bar. So far I have not been able to get the items to even go into the drop down menu, so I am thinking I do not have the container set up correctly. Thank you ahead of time!
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover + .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>
The element with the dropdown-content class is inside the element with the dropdown class, so what you are looking for is actually .dropdown:hover .dropdown-content
You current code (the + char) tells your browser to check for an adjacent sibling (and not a child element), which is not your case.
This is the update for your code:
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>
You're issue is with this CSS selector:
.dropdown:hover + .dropdown-content {
display: block;
}
It should be:
.dropdown:hover .dropdown-content {
display: block;
}
/* nav bar */
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 15;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
padding-right: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
/*****************************************************************/
/*Dropdown for portfolio tab */
/*****************************************************************/
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<title> Will's Portfolio </title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.gooleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body background = "http://2.bp.blogspot.com/-Xmo26BMqg5Q/UihlqVwTwgI/AAAAAAAAAv0/V-Rrgm0V6oo/s1600/Top+10+best+Simple+Awesome+Background+Images+for+Your+Website+or+Blog3.jpg">
<body class="About Me">
<header>
<div class="nav">
<ul>
<li>About Me</li>
<li>
<div class="dropdown">
<button class="dropbtn">Portfolio</button>
<div class="dropdown-content">
Graphics
Other
</div>
</div>
</li>
<li><nobr>Future Work</nobr></li>
</ul>
</div>
</header>
</div>
</body>
</html>