jQuery实现了一个自定义下拉列表

HTML代码：

复制代码代码如下所示：



一





一

二

六

八







CSS代码：

复制代码代码如下所示：

。dropdowncontainer {位置：相对；身高：30px；宽度：100%；背景：# 555；}

。dropdowndefault { border: 1px solid # DDD；线高度：28px；文本缩进：0.5em；}

。dropdowncontainer。DownArrow {位置：绝对的；右：5px；顶部：9px }

。dropdrown菜单{位置：绝对；顶：100%；宽度：100%；左：0；背景：# 555；显示：无；}

。dropdrown菜单里{线高度：24px；}

。dropdrown菜单里的一个{显示：内联块；宽度：100%；文本缩进：0.5em }

李：悬停菜单。dropdrown {背景：# 0078b6；字体大小：1.1em；}

箭头{宽度：0；高度：0；显示：内联块；光标；指针；}

。downarrow {左边框：6px固体透明；右：6px固体透明边界；边界上：12px固体# FFF；}





js（jQuery）代码：

复制代码代码如下所示：

$（。DropdownDefault。dropdowncontainer。downarrow）。Click（function（）{（）{）

$（这），兄弟姐妹（。dropdrown菜单）显示（）；

}）；



$（。dropdrown菜单里）。Click（function（）{（）{）

$（这）。父（母），（），兄弟姐妹（。dropdowndefault ）.html（$（this）。Html（））；

$（））父（）。父（）。隐藏（）；

}）；



代码很简单，但是效果很酷吗