当我将光标悬停在“英语”菜单上时,它会显示“More Behance”菜单的内容。Image
正如你在上面的图片中所看到的,“英语”菜单的箭头指向上方,但显示的是“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;
}
1条答案
按热度按时间3okqufwl1#
这基本上是一个样式问题。元素相互重叠。
除了最初的问题,你已经使用了这么多的css类,你可以用泛型类来替换。
例如:定义类arrow1,2,dropdown1,2不容易扩展
请参阅更正的HTML和增强的CSS。
CSS:
工作小提琴:https://jsfiddle.net/svamoy9j/