Closed. This question is off-topic。它当前不接受答案。
想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
6年前关闭。
我什至无法上手。
我想有一个下拉菜单，当您不将鼠标悬停在其上方时，该菜单会消失（顶部框除外）。
该顶部的框将显示为蓝色背景，白色文本和图像。
当您将鼠标悬停时，该框将变为黄色的指向箭头框，所有其他元素将显示，并且它们将为黑色。
一切都会有一个图像（现在黄色的顶部将保持相同的图像）和白色文本。
我该怎么办？
从本质上讲，这就是我在这里所拥有的-我假设使用jQuery做到最好。
想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
6年前关闭。
我什至无法上手。
我想有一个下拉菜单，当您不将鼠标悬停在其上方时，该菜单会消失（顶部框除外）。
该顶部的框将显示为蓝色背景，白色文本和图像。
当您将鼠标悬停时，该框将变为黄色的指向箭头框，所有其他元素将显示，并且它们将为黑色。
一切都会有一个图像（现在黄色的顶部将保持相同的图像）和白色文本。
我该怎么办？
从本质上讲，这就是我在这里所拥有的-我假设使用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>
最佳答案
您可以通过在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>
关于javascript - 如何使用jQuery制作下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19014013/