I have a problem where I want the dropdown menu to be the same width as the button to activate it.
I tried:
width: 100% (didn't work)
html {
--main-text-color: white;
--main-background-color: black;
--main-navbar-color: rgb(51, 51, 51);
--main-link-color: rgb(200, 200, 255);
overflow-x: hidden;
background-color:var(--main-background-color);
}
/*Navbar section*/
#font-face {
font-family: arrow;
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0');
}
/*Below from w3schools*/
/* Navbar container */
.navbar {
overflow: hidden;
background-color: rgb(51, 51, 51);
font-family: "arrow", "Impact", "Impactincase", serif;
}
.navbar a {
float: left;
font-size: 50px;
color: var(--main-text-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
color: rgb(225, 225, 255);
text-decoration: none;
}
.navbar .dropdown .dropdown-content a:hover {
color: black;
}
/* Links inside the navbar */
.navbar .notlogo {
float: right;
font-size: 16px;
color: var(--main-text-color);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: right;
overflow-x: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 50px;
border: none;
outline: none;
color: var(--main-text-color);
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a blue background color to navbar links on hover */
.navbar .notlogo:hover, .dropdown:hover .dropbtn {
background-color: rgb(51, 51, 100);
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: inherit;
z-index: 1;
white-space: nowrap;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
display: block;
font-size: 16px;
padding: 12px 16px;
text-decoration: none;
text-align: left;
width: 100%;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/*End of copying from w3schools*/
#normallogo {
display: inline-block;
}
#smalllogo {
display: none;
}
#media screen and (max-width: 840px) {
#normallogo {
display: none;
}
#smalllogo {
display: inline-block;
}
}
<body style="margin:0;padding:0;">
<div class="navbar" id="loadcorrectly">
<a class="ImpactD" href="index" id="normallogo">JDM Cars Galore</a>
<a class="ImpactD" href="index" id="smalllogo">JDMCG</a>
<div class="dropdown">
<button class="dropbtn">
Enquiries
</button>
<div class="dropdown-content">
Request a car
About
Contact us
Copyright
</div>
</div>
<div class="dropdown">
<button class="dropbtn">
Cars
</button>
<div class="dropdown-content">
Sprinter
RX-7
GT-R
Corona
Civic
</div>
</div>
</div>
</body>
This code is essentially the same as https://www.w3schools.com/howto/howto_css_dropdown.asp but changed.
There are several ways to accomplish this depending on your preference. The biggest issue you're facing, is that you assume the dropdown-content should know the width of it's parent. An absolute positioned element can only know the width of it's parent under certain conditions - and those conditions aren't being met.
Option #1. (Simplest) way to make the the drop-down the same width is to set a fixed width to your class (.dropdown-content) that matches the fixed width of your button that activates it.
Option #2. A more (Dynamic) way is to set the parent class (.dropdown) a position:relative. Due to your structure, there are several other changes you'll have to make to get the desired result such as getting rid of the overflow:hidden on .navbar & .dropdown.
Option #3. The (Recommended) way would be changing your structure of the Nav Bar & it's contents completely. The .navbar should be position:absolute or position:fixed (depending on how you want the nav bar to behave.) Then each of the .dropdown buttons can be position:absolute or position:relative. Then, your .dropdown-content can be set to width:100%. (Which is the behavior you're looking for).
Updated your code check :
https://jsfiddle.net/adratarek/7yw6nvka/6/
changes:
.dropdown-content {
position: absolute;
width: 100%;
}
.navbar {
/*overflow: hidden; removed and adding static height */
height: 88px;
}
You need to alter the position of the .dropdown-content class to be relative:
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
width: inherit;
z-index: 1;
white-space: nowrap;
}
Related
I want to style options present in the select input
I want to add padding for the options please help me with that
label{
font-size: 15px;
font-family: 'arial';
display: inline;
}
select{
display: inline;
padding: 5px 10px;
}
option{
padding: 10px;
}
<label for="fruits">Fruits</label>
<select name="fruits">
<option>Apple</option>
<option>Mango</option>
<option>Banana</option>
<option>MuskMelon</option>
</select>
You can't change much inside of an options menu like that. If you want to make a full customization dropdown menu then you have to make all the components yourself. I'm pretty sure you can only change the text in the option element but not the surroundings and if you can you probably have to use javascript not css
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 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: #f1f1f1}
/* 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: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Fruit</button>
<div class="dropdown-content">
Apple
Mango
Banana
MuskMelon
</div>
</div>
[i am new to website design, any help is appreciated]
This code is for having the dropdown button links appear in a list form, what i am trying to do is when you hover over the "More about Us", the links will show on the right side of the button
[HTML]
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
[CSS]
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 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: #B9DADC;}
OK, if now i understand what do you want you can solve this adding the position at the .dropdown-content.
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left: 100%;
top:0;
}
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
left: 100%;
top:0;
}
/* 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: #B9DADC;}
<html>
<body>
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
I loose the fact that you want the link displayed all inline. To achieve this you have to set a fixed dimensione of .dropdown-content like :
width: 350px;
and the display of a element, like
display: inline-block;
/* Dropdown Button */
.dropbtn {
background-color: brown;
color: white;
padding: 10px;
font-size: 40px;
border: outset;
font-family: Agency FB;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
/*SET POSITION TO THE RIGHT AND TOP OF PARENT BOUNDARIES*/
left: 100%;
top:0;
width:350px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
display:inline-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: #B9DADC;}
<html>
<body>
<div class ="Links">
<div class="dropdown">
<button class="dropbtn">More About Us</button>
<div class="dropdown-content">
Employees
What we do
FAQ
</div>
</body>
</html>
This is not sure the best solution but at the moment it is the only solution that comes to my mind.
Maybe you can try playing with
display: flex;
adding it to the .dropdown-content and then working on child element
i am builduing a dropdown menu and want that the opening menu expands to the left side and not to the right side of the above button. Currently the drop down menu opens to the right and i dont see a way to change it. I created the following picture to make it more clear.
.button-container {
position: relative;
/*text-align: center;*/
padding: 0;
border-radius:50%;
overflow:hidden;
width: 15%;
/*float: center;*/
}
.button-container img{width:100%; height:auto; display:block}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color:#666666;
padding: 12px 16px;
text-decoration: none;
display: block;
right: 4px;
left: auto;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:#F16852;}
/* 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: #3e8e41;
}
<div>
<div class="dropdown">
<div class="button-container">
<img src="http://www.fillmurray.com/g/300/300"/>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Thanks a lot. I am happy for any clarification.
Since your dropdown is already positioned absolutely relative to the parent .button-container, you can expand from the right side by just adding
.dropdown-content
{
right: 0;
}
I also added a couple changes to move your icon to the right side to match your example image:
.button-container
{
display: inline-block;
}
.dropdown
{
text-align: right;
}
.dropdown-content
{
text-align: left;
}
.button-container {
position: relative;
display: inline-block;
/*text-align: center;*/
padding: 0;
border-radius:50%;
overflow:hidden;
width: 15%;
/*float: center;*/
}
.button-container img{width:100%; height:auto; display:block}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
text-align: right;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: left;
}
/* Links inside the dropdown */
.dropdown-content a {
font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color:#666666;
padding: 12px 16px;
text-decoration: none;
display: block;
right: 4px;
left: auto;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:#F16852;}
/* 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: #3e8e41;
}
<div>
<div class="dropdown">
<div class="button-container">
<img src="http://www.fillmurray.com/g/300/300"/>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
With your current code setup, you can try the below code. I have used some flexbox properties with other small changes to meet your requirements.
CODEPEN LINK: https://codepen.io/emmeiWhite/pen/ZEBExQV
FULL WORKING CODE:
.button-container {
position: relative;
/*text-align: center;*/
padding: 0;
overflow:hidden;
display:flex; /*Code Added */
justify-content:flex-end;
margin-left:auto;
/*float: center;*/
width:160px;
}
.button-container img{width:50px; height:50px; display:block; border-radius:50%} /* Code changed */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
font-weight: 600; /*Semi-Bold = 600*/ /*Bold = 700*/
font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color:#666666;
padding: 12px 16px;
text-decoration: none;
display: block;
right: 4px;
left: auto;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:#F16852;}
/* 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: #3e8e41;
}
<div>
<div class="dropdown">
<div class="button-container">
<img src="http://www.fillmurray.com/g/300/300"/>
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
I'm trying to develop a website using django and I'd like to add a navigation bar dropdown menu, but for some reason, it keeps showing up as horizontal, instead of vertical.
I'm following the tutorial that W3 Schools has on their website https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button
Despite all of my efforts it still doesn't work, I've tried to look at other questions, but most of them seem to be using a different method using lists, or their using a framework like react.
I moved my project over to this jsfiddle.net and that just seemed to make the problem even worse, because now my second list item in the dropdown doesn't show up at all.
Here is the code I'm working with http://jsfiddle.net/iggy12345/ao04gfne/9/
Here is the code pasted below:
My html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
Profile
<div class="dropdown-content">
Logout
Customize Profile
</div>
</div>
</div>
</body>
</html>
My css file:
.dropdown {
float: left;
height: 55px;
display: inline-block
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: relative;
top: 55px;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.header {
background-color: #350752;
overflow-x: hidden;
overflow-y: visible;
}
.header > a, .dropdown > a {
float: left;
color: #dcb0f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
.header a:active {
background-color: #c7860e
color: white;
}
Edit
I remodelled my css to look like Chaska's answer, but it still doesn't work, I had to make a few tweaks to get it to keep its original look, but now it adds a scrollbar whenever I hover over profile.
Basically, according to the w3 tutorial, the dropdown list should show up under the profile box, but instead, whenever I try to do it, the entries just sit over the profile button, covering it up, and then on top of that, they continue horizontally instead of vertically
Some revises applied to the css. Please read the relevant comment:
.dropdown {
float: left;
display: inline-block;
height: 55px; /* overflow: hidden will hide the dropdown menu, use fixed height instead */
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
top: 55px; /* must specify the top position */
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.header {
background-color: #350752;
overflow: visible; /* overflow: hidden will hide the dropdown menu */
}
.header > a, /* use > to select the direct child <a> instead of all of <a> child */
.dropdown > a {
float: left;
color: #dcb0f7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
.header a:active {
background-color: #c7860e;
color: white;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
Profile
<div class="dropdown-content">
Logout
Customize Profile
</div>
</div>
</div>
</body>
</html>
.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);
z-index: 1;
}
.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;
}
.header{
background-color: #350752;
}
.header a:hover {
background-color: #15bccf;
color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="header">
<a class="active" href="{% url 'home' %}">Home</a>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div>
</body>
</html>
Try with this code with your CSS.
I currently have a navigation bar with typical links "Home, About, Resume, Contact".
I currently have code so when you hover over Resume (by default has an arrow pointing down), a dropdown appears and the direction of the arrow changes to point up using two span classes (code is below).
What I want to achieve is while hovering over the dropdown contents, the arrow is still pointing up (currently it reverts to pointing down while hovering over dropdown links).
Here is the current Code:
CSS/HTML:
/* Navbar links besides Resume */
.container1 {
overflow: hidden;
font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
text-align: center;
}
/*Navbar links besides Resume */
.container1 a {
display: inline;
font-size: 30px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline;
vertical-align: middle;
}
/* Affects Resume*/
.dropdown .dropbtn {
display: inline;
font-size: 30px;
font-family: Cabin,Helvetica,Arial,sans-serif;
border: none;
outline: none;
color: inherit;
padding: 14px 16px;
background-color: inherit;
}
/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
background-color: inherit;
}
button .hover { display: none; }
button:hover .no_hover { display: none; }
button:hover .hover { display: inline; }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 52.3%;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 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;
}
<div class="container1">
<a id="home" href="#">Michael Geng</a>
<a id="about" href="#">About</a>
<div class="dropdown">
<a id = "resume" href="#"><button class="dropbtn">
<span class="no_hover">Resume ▼</span>
<span class="hover">Resume ▲</span>
</button></a>
<div class="dropdown-content">
<a id = "objective" href="#">Objective</a>
<a id = "education" href="#">Education</a>
<a id = "skills" href="#">Skills</a>
</div> <!-- dropdown-content -->
</div> <!-- dropdown -->
<a id="contact" href="#">Contact</a>
</ul>
</div> <!--container1 -->
My current thought this line of code where when you hover over the dropdown contents to change the display but I have not got it working:
.dropdown-content:hover ~ .no_hover{display: none; }
.dropdown-content:hover ~ .hover{display: inline; }
You need to change the CSS that triggers the appropriate arrow span to be displayed to be based on hovering over .dropdown. See updated snippet.
/* Navbar links besides Resume */
.container1 {
overflow: hidden;
font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
text-align: center;
}
/*Navbar links besides Resume */
.container1 a {
display: inline;
font-size: 30px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline;
vertical-align: middle;
}
/* Affects Resume*/
.dropdown .dropbtn {
display: inline;
font-size: 30px;
font-family: Cabin,Helvetica,Arial,sans-serif;
border: none;
outline: none;
color: inherit;
padding: 14px 16px;
background-color: inherit;
}
/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
background-color: inherit;
}
button .hover { display: none; }
.dropdown:hover .no_hover { display: none; }
.dropdown:hover .hover { display: inline; }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
left: 52.3%;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* 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;
}
<div class="container1">
<a id="home" href="#">Michael Geng</a>
<a id="about" href="#">About</a>
<div class="dropdown">
<a id = "resume" href="#"><button class="dropbtn">
<span class="no_hover">Resume ▼</span>
<span class="hover">Resume ▲</span>
</button></a>
<div class="dropdown-content">
<a id = "objective" href="#">Objective</a>
<a id = "education" href="#">Education</a>
<a id = "skills" href="#">Skills</a>
</div> <!-- dropdown-content -->
</div> <!-- dropdown -->
<a id="contact" href="#">Contact</a>
</ul>
</div> <!--container1 -->