如何显示下拉菜单的内容?

Question

将鼠标悬停在" English "菜单上时，显示" More Behance "菜单的内容。图片

如上图所示，"English"菜单的箭头向上指向，但显示的却是"More Behance"菜单的内容。谁能帮我用HTML和CSS语言只。

我试着用下面给出的代码来解决这个问题。

HTML代码:

<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><a href="#">Careers at Behance</a></li>
<li><a href="#">Adobe Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Creative Career Tips</a></li>
<li><a href="#">Download the App</a></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><a href="#">English</a></li>
<li><a href="#">Čeština</a></li>
<li><a href="#">Dansk</a></li>
<li><a href="#">Deutsch</a></li>
<li><a href="#">Español</a></li>
<li><a href="#">Français</a></li>
<li><a href="#">Italiano</a></li>
<li><a href="#">Nederlands</a></li>
<li><a href="#">Norsk</a></li>
<li><a href="#">Polski</a></li>
<li><a href="#">Português</a></li>
<li><a href="#">Pусский</a></li>
<li><a href="#">Suomi</a></li>
<li><a href="#">Svenska</a></li>
<li><a href="#">Türkçe</a></li>
<li><a href="#">日本語</a></li>
<li><a href="#">한국어</a></li>
<li><a href="#">中文(简体)</a></li>
<li><a href="#">中文(繁體)</a></li>
</ul>
</div>  

CSS代码:

.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

这基本上是一个样式问题。元素相互重叠

除了原来的问题，你已经使用了这么多的css类，你可以用泛型类代替。

e。G:定义像arrow1、2、dropdown1、2这样的类不容易扩展

查看更正后的HTML和增强后的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><a href="#">Careers at Behance</a></li>
<li><a href="#">Adobe Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Creative Career Tips</a></li>
<li><a href="#">Download the App</a></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><a href="#">English</a></li>
<li><a href="#">Čeština</a></li>
<li><a href="#">Dansk</a></li>
<li><a href="#">Deutsch</a></li>
<li><a href="#">Español</a></li>
<li><a href="#">Français</a></li>
<li><a href="#">Italiano</a></li>
<li><a href="#">Nederlands</a></li>
<li><a href="#">Norsk</a></li>
<li><a href="#">Polski</a></li>
<li><a href="#">Português</a></li>
<li><a href="#">Pусский</a></li>
<li><a href="#">Suomi</a></li>
<li><a href="#">Svenska</a></li>
<li><a href="#">Türkçe</a></li>
<li><a href="#">日本語</a></li>
<li><a href="#">한국어</a></li>
<li><a href="#">中文(简体)</a></li>
<li><a href="#">中文(繁體)</a></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;
}

工作小提琴:https://jsfiddle.net/svamoy9j/