使jQuery下拉框显示为内联

时间:2011-05-26 00:05:44

标签: jquery css layout drop-down-menu

我正在尝试将此jQuery插件用于下拉框。我希望下拉框在旁边显示,而不是在其下面。我尝试了floatdisplay属性,我觉得这很简单,但我无法得到它。

演示:http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/

有问题的CSS代码:

    .desc { color:#6b6b6b;}
    .desc a {color:#0092dd;}

    .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
    .dropdown dd { position:relative; }
    .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
    .dropdown a:hover { color:#5d4617;}
    .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
    .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                    border:1px solid #d4ca9a; width:150px;}
    .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
    .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                      left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
    .dropdown span.value { display:none;}
    .dropdown dd ul li a { padding:5px; display:block;}
    .dropdown dd ul li a:hover { background-color:#d0c9af;}

    .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
    .flagvisibility { display:none;}

有什么想法吗?

2 个答案:

答案 0 :(得分:0)

你能告诉我们你的尝试吗?首先,格式化您的代码,您可以使用PHP来缩小或缩小实时版本(保留未开发的版本以进行开发)

看看那个链接,我会说你需要在dl.dropdown或.dropdown上应用float / display,我在你的代码中没有看到...

答案 1 :(得分:0)

是的,在您单击的框中,<dt>框,使其格式为float: left,同时向float: left提供<dd>包含所有内容的{{1}}选择。