Javascript 创建自定义下拉菜单

我正在尝试创建一个下拉菜单，它与下图相同

有一个边框图像和一个分隔图像需要应用于for的和

我无法追查到这个问题。可能与类的数量和属性完全混淆。有人能帮我找出这个问题吗

---

这是。

首先，为什么不使用引导

第二,， 如果您想在li或ul中添加图像，您可以通过几种方式来实现，其中之一是

<li>
     <img src="path/to/image"></img>
<li>

---

另一种方法是在css中添加背景并给它一个偏移量。

您可以使用边框底部和边框颜色来完成此操作

将ul注册>li>a更改为

.ul注册>li>a{

 display: block;
  background-position: 10px bottom;
  background-image: url("http://i.imgur.com/OdpE6ba.png");
  border-bottom: 1px solid;
  border-color:#C8C8C8;
  font-weight: normal;
  line-height: 1.42857143;
  color: black;
  white-space: nowrap;
}

---

这是一把小提琴

你可以试试下面的

在您的.ul注册>li>中添加边框底部：1px固体000

并加上

#dropdownMenu1 {
    border: 1px solid #000;
}

这是你的电话号码

要添加边框，只需将边框添加到ul元素

*********更新了图像分离器*********************

我使用了谷歌的随机线条图像，因为我觉得你的图像太白了

检查这个

谢谢。

请删除

  background-position: 10px bottom;
  background-image: url("http://i.imgur.com/OdpE6ba.png");

在css selector.ul signup>li>a中，我替换了css selector.dd li中的ur边框图像，因为它不太显眼

---

更新的

我可以问一下这有什么意义吗？为什么不选择HTML元素和选项来创建它？这是以这种方式编写的，我需要修复下拉列表，因此我不想花费太多时间，最终在这里和那里更改css就浪费了太多时间。嘿，Rachel，谢谢，但不是这样帽子边框我想用那个图像作为分隔符，而不是那个line@Suraj当我在浏览器中输入该url时，没有显示“是”，因为它是白色的。检查元素并在浏览器中将主体颜色更改为黑色，您将能够看到颜色分隔符white@Suraj那我就不明白问题了没问题Rachel谢谢r你的时间好的，让我再检查一次@Suraji，现在检查更新的小提琴。这次使用图像作为分隔符。你的图像对我来说太白了，所以我使用了谷歌的随机图像。但是你应该可以更改图像以使用自己的图像。@Suraji只是一个快速更新。我从谷歌使用的图像参考已经更改。所以，图像我使用-276px的位置需要更正为-75px，这样示例才能工作[pdated fiddle为支持我的上一条评论，您的fiddle中没有出现选择，您的fiddle本身没有出现选择，对吗？。您能澄清我您发布此问题的边框图像没有显示或选择没有发生吗？

  background-position: 10px bottom;
  background-image: url("http://i.imgur.com/OdpE6ba.png");