谷歌翻译风格选择菜单答案

【问题标题】：Google Translate style select menus谷歌翻译风格选择菜单
【发布时间】：2011-10-01 18:04:59
【问题描述】：

我想用类似于 Google 在Google Translate (translate.google.com) 上的样式来使用 CSS 设置 HTML 选择菜单的样式。我在网上寻找过教程，但一切都使用了 jQuery。 如何制作与此类似但使用 CSS 设置样式的内容？

我希望你能理解我的问题以及我想要描述的内容。

【问题讨论】：

【解决方案1】：

google 所做的是让 js 构建一个与普通下拉框完全不同且可样式化的 html 结构，然后使用 css 对其进行样式化。在每种语言上使用点击事件，当您选择新的语言进行翻译时，一些隐藏的表单元素值会被编辑。

你可以用 jQuery 做同样的事情并做一些工作。

我希望这能阐明它的工作原理。

【讨论】：

【解决方案2】：

如果你想只用 CSS 做类似的事情，那就忘了它 - 根本不可能。 Google 将 javascript 用于某些功能，例如当用户选择语言时，它会被选中，并且当用户下次尝试翻译时会有边框和不同的背景。

如果您只是想要类似的下拉功能，请查看here

【讨论】：

这是很好的代码，虽然我会避免内联块，但您不必在 jsfiddle 上包含 html 和 body 元素并使用“TidyUp”功能;) +1。 jsfiddle.net/sg3s/GjxUX/1
感谢您的提示。我使用 inline-block 只是为了让子关卡显示阴影并且 UL 对齐。（可能应该在 UL 和 .sub 上都使用 float left）