如何使用 jQuery 制作下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19014013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a dropdown menu with jQuery
提问by Cecil Rodriguez
I'm having trouble even getting started.
我什至无法开始。
I want to have a drop down menu that disappears (except for the top box) when you aren't hovering over it.
我想要一个下拉菜单，当您没有将鼠标悬停在它上面时，它会消失（顶部框除外）。
That top box will appear with a blue background and white text, and an image.
该顶部框将显示为蓝色背景和白色文本，以及一个图像。
When you hover, that box will turn into a yellow pointing arrow box, and all of the other elements will show, and they will be in black.
当您悬停时，该框将变成一个黄色的箭头框，所有其他元素都将显示，它们将显示为黑色。
Everything will have an image (the now yellow top will keep the same image) and white text.
一切都会有一个图像（现在黄色的顶部将保持相同的图像）和白色文本。
How do I go about this?
我该怎么做？
This is essentially what I have here - I'm assuming using jQuery to do this is best.
这基本上就是我在这里所拥有的 - 我假设使用 jQuery 来做到这一点是最好的。
<ul>
<li id="topitem"><img src="blahblahblah1"/>Setup Wizard</li>
<li><img src="blahblahblah2"/>Language</li>
<li><img src="blahblahblah3"/>Password</li>
<li><img src="blahblahblah4"/>Bluetooth Devices</li>
<li><img src="blahblahblah5"/>Network Config</li>
<li><img src="blahblahblah6"/>Finish</li>
</ul>
回答by Lakpa Sherpa
you can accomplish this task by creating ul li in Jquery and for those effect use CSS.
您可以通过在 Jquery 中创建 ul li 来完成此任务，并使用 CSS 实现这些效果。
<style>
ul.menu {
display: block;
position: relative;
list-style: none;
background-color: beige;
font-weight: bold;
width: 150px;
}
li > ul.subMenu {
display: none;
list-style: none;
background-color: beige;
font-weight: bold;
white-space: nowrap;
}
ul.subMenu > li {
display: block;
}
li:hover ul.subMenu {
display: block;
position: absolute;
}
</style>
</head>
<body>
<ul class="menu">
<li> TEST
<ul class="subMenu">
<li id="topitem">
<img src="blahblahblah1" />Setup Wizard</li>
<li>
<img src="blahblahblah2" />Language</li>
<li>
<img src="blahblahblah3" />Password</li>
<li>
<img src="blahblahblah4" />Bluetooth Devices</li>
<li>
<img src="blahblahblah5" />Network Config</li>
<li>
<img src="blahblahblah6" />Finish</li>
</u>
</li>
</ul>
</body>
回答by Jim
There are a ton of tutorials on how to do this out there...I would recommend finding one that you like (style and behavior) and then looking at the jQuery, HTML, and CSS code to see how it works. Here are a couple of links to get you started:
有很多关于如何做到这一点的教程......我建议找到一个你喜欢的教程（样式和行为），然后查看 jQuery、HTML 和 CSS 代码以了解它是如何工作的。这里有几个链接可以帮助您入门：
http://css-tricks.com/simple-jquery-dropdowns/
http://css-tricks.com/simple-jquery-dropdowns/
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
