x：可见的; 并溢出
假设你有一些风格和标记：
ul
{
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
/* added width so it would work in the snippet */
width: 100px;
}
li
{
display: inline-block;
}<div>
<ul>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
</ul>
</div>经过一番认真的搜索后，似乎我找到了我的问题的答案：
来自：http://www.brunildo.org/test/Overflowxy2.html
在Gecko，Safari，Opera中，'visible'与'hidden'结合时也会变成'auto'（换句话说，'visible'变成'auto'时与'visible'不同）。 其中Gecko 1.8，Safari 3，Opera 9.5相当一致。
W3C规范也表示：
'overflow-x'和'overflow-y'的计算值与它们的指定值相同，除了某些与'visible'的组合是不可能的：如果一个被指定为'visible'而另一个'scroll'或'auto'，那么'visible'被设置为'auto'。 如果'overflow-y'是相同的，'overflow'的计算值等于'overflow-x'的计算值; 否则它是'overflow-x'和'overflow-y'的计算值对。
简洁版本：
如果您使用的是visible的或者overflow-x或overflow-y比其他东西visible为其他，则visible值被解释为auto 。
我最初在使用Cycle jQuery插件时发现了一种CSS方式来绕过这一点。 Cycle使用JavaScript将我的幻灯片设置为overflow: hidden ，所以当将我的图片设置为width: 100%图片看起来垂直切割，所以我强制它们在!important可见，并避免将幻灯片动画显示出来框我设置overflow: hidden到幻灯片的容器div。 希望对你有效。
更新 - 新解决方案：
原始问题 - > http://jsfiddle.net/xMddf/1/（即使我使用overflow-y: visible它变成了“auto”，实际上是“scroll”。）
#content {
height: 100px;
width: 200px;
overflow-x: hidden;
overflow-y: visible;
}
新的解决方案 - > http://jsfiddle.net/xMddf/2/（我发现了一个解决方案，使用wrapper div将overflow-x和overflow-y应用于不同的DOM元素，正如James Khoury所建议的将visible和hidden到单个DOM元素。）
#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}
另一个便宜的黑客，这似乎是伎俩：
style="padding-bottom: 250px; margin-bottom: -250px;" 在垂直溢出截断的元素上，其中250代表您的下拉列表所需的像素数量等等。