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

j8ag8udp  于 2023-01-18  发布在  其他
关注(0)|答案(1)|浏览(212)

当我将光标悬停在“英语”菜单上时,它会显示“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;
}
3okqufwl

3okqufwl1#

这基本上是一个样式问题。元素相互重叠。
除了最初的问题,你已经使用了这么多的css类,你可以用泛型类来替换。
例如:定义类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/

相关问题