DIV模拟下拉框的最佳实践

Question

类似这种的下拉框，要做到最好的自适应考虑：

1、左侧文字4-8个不等；
2、右侧宽度130或260像素甚至自适应父元素达到父元素最宽；
应该使用什么样的html结构以及css布局方式。
（为了满足需求当然可以写长短多套组件）。需求第一。

麻烦至少说明结构以及主要CSS布局机制。

Answer 1

建议参考bootstrap下拉框的实现，有必要的话可以看看sass或者less源码

简单的说就是ul li之后控制css

Answer 2

一个 ul li结构，点击显示隐藏，为什么不用select标签呢？

Answer 3

你列的要求不难，比如自适应的话就不要给宽度，而是给padding值，关键是你的需求我还是有些不明确，因为这涉及到布局。你是想实现下拉效果还是完全模拟select，比如点击选中某一栏，下拉消失，并且需要在form表单里面进行使用。