修改由div创建的自定义下拉菜单

1. 创建下拉菜单的HTML结构，其中包含一个用于触发下拉菜单的按钮和一个用于显示选项的div元素。下面是一个示例代码：

<div class="dropdown">
  <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

2. 使用CSS样式对下拉菜单进行样式修饰，并为其添加交互效果。例如，使用样式设置下拉菜单呈现为浮动位置并使用过渡效果添加展开和收缩效果。

3. 使用JavaScript或jQuery编写代码来执行下拉菜单的下拉、收起和选择选项等操作。下面是一个示例代码：

// 打开/关闭下拉菜单
$('.dropdown-toggle').click(function() {
  $(this).next('.dropdown-menu').slideToggle();
});

// 选择选项
$('.dropdown-item').click(function() {
  var selectedValue = $(this).text();
  $(this).parents('.dropdown').find('.dropdown-toggle').html(selectedValue);
  $(this).parents('.dropdown-menu').slideUp();
});

这些细节可以根据实际情况进行更改和调整。