How to display the contents of drop up menu? - html

Question

When I hover my cursor on 'English' menu, it displays the contents of 'More Behance' menu.
Image
As you can see in the Image above, the arrow for 'English' menu points upwards but displays the contents of 'More Behance' menu. Can anyone help me out by using HTML and CSS languages only.
I tried solving this problem using the code given below.
The HTML code:
<div class="dropup">
<div>
<div class="arrow-down"></div>
<button class="dropbtn1">More Behance</button>
</div>
<ul class="dropup-content" style="width: 195px; left: 20px; bottom: 30px;">
<li>Careers at Behance</li>
<li>Adobe Portfolio</li>
<li>Blog</li>
<li>Creative Career Tips</li>
<li>Download the App</li>
</ul>
</div>
<div class="dropup">
<div>
<div class="arrow-down1"></div>
<button class="dropbtn2">English</button>
</div>
<ul class="dropup-content" style="width: 100px; left: 40px; bottom: 30px;">
<li>English</li>
<li>Čeština</li>
<li>Dansk</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
<li>Nederlands</li>
<li>Norsk</li>
<li>Polski</li>
<li>Português</li>
<li>Pусский</li>
<li>Suomi</li>
<li>Svenska</li>
<li>Türkçe</li>
<li>日本語</li>
<li>한국어</li>
<li>中文(简体)</li>
<li>中文(繁體)</li>
</ul>
</div>
The CSS Code:
.arrow-down {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid dimgray;
position: relative;
left: 198px;
bottom: -13px;
}
.arrow-down:hover{
transform: rotateZ(-180deg);
}
.arrow-down1 {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid dimgray;
position: relative;
left: 18px;
bottom: -13px;
}
.arrow-down1:hover {
transform: rotateZ(-180deg);
}
.dropbtn1{
padding: 5px;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: bold;
color: dimgray;
font-weight: bold;
margin-bottom: 0;
margin-top: -7.5px;
cursor: pointer;
position: relative;
left: 20px;
top: 2px;
text-align: center;
}
.dropbtn2{
padding: 5px;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: bold;
color: dimgray;
font-weight: bold;
margin-bottom: 0;
margin-top: -7.5px;
cursor: pointer;
position: relative;
left: 63px;
top: 2px;
text-align: center;
}
.dropup{
position: relative;
display: inline-block;
}
.dropup-content{
display: none;
position: absolute;
/* left: 20px;
bottom: 25px; */
background-color: #f1f1f1;
width: 195px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
border-radius: 10px;
font-weight: bold;
font-size: 11px;
padding-right: 7px;
color: dimgray;
/* transition: 0.3s color; */
}
.dropup-content a{
color: #000;
padding: 6px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover{
background-color: #0057ff;
color: white;
}
.dropup:hover .dropup-content{
display: block;
}

Answer 1

This was basically a styling issue. Elements were overlapping each other.
Apart from the original issue you have used so many css classes, which you could replace using generic classes.
e.g : defining classes like arrow1,2 , dropdown1,2 cannot scale up easily
See the corrected HTML and anhanced css.
<div class="dropup">
<div>
<div class="arrow-down"></div>
<button class="dropbtn1">More Behance</button>
</div>
<ul id="menu1" class="dropup-content" style="width: 195px; left: 20px; bottom: 30px;">
<li>Careers at Behance</li>
<li>Adobe Portfolio</li>
<li>Blog</li>
<li>Creative Career Tips</li>
<li>Download the App</li>
</ul>
</div>
<div class="dropup">
<div>
<div class="arrow-down"></div>
<button class="dropbtn">English</button>
</div>
<ul id="menu2" class="dropup-content" style="width: 100px; left: 40px; bottom: 30px;">
<li>English</li>
<li>Čeština</li>
<li>Dansk</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
<li>Nederlands</li>
<li>Norsk</li>
<li>Polski</li>
<li>Português</li>
<li>Pусский</li>
<li>Suomi</li>
<li>Svenska</li>
<li>Türkçe</li>
<li>日本語</li>
<li>한국어</li>
<li>中文(简体)</li>
<li>中文(繁體)</li>
</ul>
</div>
CSS:
.more-space{height : 200px;}
.arrow-down{
float : right;
}
.arrow-down:before{
font-size : 9px;
content: "\25bc";
}
.arrow-down:hover{
transform: rotateZ(-180deg);
}
.dropup{
margin : 2px 5px;
position : relative;
float : left;
}
.dropup-content{
display: none;
position: absolute;
/* left: 20px;
bottom: 25px; */
background-color: #f1f1f1;
width: 195px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
border-radius: 10px;
font-weight: bold;
font-size: 11px;
padding-right: 7px;
color: dimgray;
/* transition: 0.3s color; */
}
.dropup-content a{
color: #000;
padding: 6px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover{
background-color: #0057ff;
color: white;
}
.dropup:hover .dropup-content{
display: block;
}
Working Fiddle : https://jsfiddle.net/svamoy9j/