JavaScript 下拉菜单
真的很喜欢我在 http://www.scriptiny 上找到的下拉菜单.com/2008/04/sliding-javascript-dropdown-menu/
我有 4 个菜单，当我添加此菜单时，它会流过徽标。每个菜单的尺寸实际上太大了。当我尝试改变它时，子菜单的大小保持不变，而且看起来很丑。我无法附加屏幕截图，因为不允许我这样做。 我基本上希望菜单框的尺寸更小； CSS代码是：
body {margin-left:140px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:right; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
Really love the drop down that I found on http://www.scriptiny.com/2008/04/sliding-javascript-dropdown-menu/
I have 4 Menus and when I add this this flows over the logo. The size of each menu is in fact too big. When I tried to alter this the size of sub-menus stay the same and it was looking ugly. I can't attach screenshot as SO doesnt allow me to.
I basically want the size of the menu box to be smaller;
CSS code is :
body {margin-left:140px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:right; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我同意格伦的观点。我们可以更详细地了解您所做/尝试的事情吗？
我在 FireFox 4.01 和 FireFox 5.0 上使用 float:right 在下拉类上进行了测试，并得到了我预期的结果。
编辑：
++ 韦斯利的解决方案，因为在 dropwdown 类之外包装更干净...
I agree with Glenn. Can we have more detail of what you did/tried?
I tested with FireFox 4.01 and FireFox 5.0 with a float:right on the dropdown class and got the results I expected.
EDIT:
++ to Wesley's solution as it's cleaner to wrap outside the dropwdown class...
如果你无法弄清楚它的样子，请将其放在带有
float:right的 div 中If you can't figure it out the way it is, put it in a div with
float:right