特殊样式的下拉列表 - 布局的一百种方法

这种布局

需要把中间的那条边线做空

我能想到的方法：

• 一个空的span标签挡一下；除了用浮动外，尽量用负边距布局，若北京变成了四个字，长度变了也不好控制那个空标签跟着变
• 让“北京”所在的标签高度高一点，层级也高过下拉菜单，遮挡住他所占区域的下边线；但是涉及到这个例子，下拉菜单我给的是浮动的，层级已经比不浮动的高了，没办法，谁让他是拉出来的，不能放在父元素的正常文档流中呢。思考：怎么让他即实现效果，又能在正常的文档流中被父元素遮挡呢？

然后就是看别人的方法：

• 一个bootstrap网站的类似效果（但是他们这种结构都过于简单，我平时也可以实现，不太适用于目前这个问题）：

 看结构

样式技巧在于：

ul{border-bottom: 1px solid #ccc;}

li{margin-bottom:-1px;background:#fff;}//background是我自己发挥的，但是还是设置上比较好

li a{border: 1px solid #ccc;border-bottom-color:transparent;}//这是源代码，人家给的a的下边线颜色是透明的，但是我自己思考，为了兼容ie，还是给成背景色比较好 border-bottom-color:#fff;

和我平时的处理方法相比：

我是会吧border-bottom设置为none;这样li的高度就比ul的高度小一点，还得设置li高于ul的高度，具体高出多少要看border的宽度。

• 另一种方法，浏览网页时无意看到：

使用背景图横向叠加的方法，形成父元素的border-bottom，但是在我看来这和直接设置border-botoom没有什么区别，甚至更麻烦。

然后给子元素需要遮盖父元素下标签的地方的border一个同背景色一致的颜色，这点和我的处理如出一辙。

总是方法还会有很多种，日后我发现了就继续补充、

方法确实有千万种，看自己的积累和巧妙构思。但是唯一的目的就是实现。不过多想点，找出最简单的方法势必能提升效率。

第二篇

最后我求助群里，群友一句话点醒了我让我看到了希望，他说这个不是和京东商城一致么，我一看还真是，万能的群友

他的交互和我的一样，都是需要一个隐藏的下拉列表再展示出来，并且样式的也和我需要的一样

才发现，人家的结构和我的不一样，我自己搭的结构就和我后边想实现的额效果矛盾了，所以有时候不是怨人家涉及，别人的网站能实现的效果你做不出来就是你的问题了。

这一个li就是我的京东

其中第一个div包裹的是目前能看到的文字、箭头等

第二个div是会展开的下边的列表。

而我的结构：

这就能看出区别了吧，如果你把北京和<i>标签放到一个div里，这样，他们就是会有共同的父元素，就会有层级折叠的问题。

然后

样式处理上，他的方法不是以上我说的那四种，他是给了class为cw-icon的div一个padding-bottom：2；

然后第二个div的top再多往上移了点。