Changing Content of dropdown button when hovering over dropdown elements - html

Question

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 &#9660</span>
<span class="hover">Resume &#9650</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; }

Answer 1

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 &#9660</span>
<span class="hover">Resume &#9650</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 -->