制作一个包含单选按钮的下拉菜单

Question

所以这是我想要实现的概念： sketch

对于那些无法查看图像的人，我有一个下拉菜单（标题为“预设”），其中包含一个单选按钮列表，每个按钮代表一个不同的预设，当悬停/选择单选按钮时，预设对应使用该单选按钮预览（悬停在按钮上）并在不同的 div 元素上实现（选择单选按钮）。

<nav id="topNav">
<ul style="list-style: none;">
<li>
  <a href="#" title="Nav Link 2">presets</a>
  <ul style="list-style: none;">
    <li><input type="radio" class="rb" id="pr1" name="preset" value="1" checked="checked">Preset 1</li>
    <li><input type="radio" class="rb" id="pr2" name="preset" value="2">Preset 2</li>
    <li><input type="radio" class="rb" id="pr3" name="preset" value="3">Preset 3</li>
    <li><input type="radio" class="rb" id="pr4" name="preset" value="4">Preset 4</li>
  </ul>
</li>

      <div id="a"></div>

Here 是我执行此操作的尝试。有几件事我在排除故障时遇到了问题（因此我需要先自行排除故障，然后才能解决我的问题）：

1. 默认情况下，每次刷新页面时菜单似乎都会下拉。有没有办法让菜单在刷新时保持紧凑？

1234563我想我需要为此使用脚本，对吧？ Specifically, when the mouse cursor hovers over a preset, the div element will momentarily express the details of that preset (in this case, a different color) and when the preset is selected, the div element will change its current color to that of the选择预设。

2. 我计划对此进行扩展，让用户为 div 元素选择一个预设并发送表单以将其保存在数据库中。考虑到我想要的功能，在浏览器兼容性方面我会遇到困难吗？

Answer 1

1. 您可以在用作下拉菜单的ul 元素上设置display:none。
2. 对此最实用的方法是将mouseenter 和mouseleave 事件侦听器添加到每个li 项目。在mouseenter 上，您将预览div 的颜色设置为与发生事件的li 元素关联的颜色。在mouseleave 上，您可以将其设置回原始颜色。
3. 对于大多数浏览器来说应该不是问题。

这是您的 fiddle 的修改版本，展示了所需的行为。