gpt4 book ai didi

javascript - 在链接下显示下拉菜单

转载 作者:太空宇宙 更新时间:2023-11-03 20:33:13 24 4
gpt4 key购买 nike

我尝试在用户将鼠标悬停在 ID 为 galerie 的链接上后显示下拉菜单。我是这样解决的:

$("#gallerie").mouseover
(
function()
{
$("#gallerie_drop").css("display","block");
}
);

$("#gallerie_drop").mouseleave
(
function()
{
$("#gallerie_drop").css("display","none");
}
);
#header {
text-align: right;
padding:20px;
}

#header a {
padding: 20px;
}

#gallerie_drop {
display:none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<a href="#" id="gallerie"> Galerie </a>
<a href="#" id="videos"> Videos </a>
<a href="#" id="photos"> Photos </a>
<a href="#" id="foo"> Foo </a>
<a href="#" id="bar"> Bar </a>
</div>

<div class="dropdown-content" id="gallerie_drop">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>

但是我怎样才能让这个框出现在链接的正下方呢?

JSFIDDLE:https://jsfiddle.net/c544es76/2/

最佳答案

如果您正在创建菜单,请使用 UL、LI。这是演示,带有可悬停的元素。全部没有JS: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

关于javascript - 在链接下显示下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37675949/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com