Question

在下一页中，我快速模拟了我一直在寻找的内容。这是我的例子的问题：

1）它需要内联，因此它可以是句子的一部分。喜欢..欢迎来到我的博客，查看一些[类别]。之后还有一些文字。

2）当框示例时，它应该与下面的内容重叠，而不是将其推下来。

http://kyleetilley.name/examples/catbox/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Blog Design</title>

        <script src="jquery.js" type="text/javascript"></script>

        <script type="text/javascript">
        $(document).ready(function(){
            $(".catbox ul").hide();

            $(".catbox_toggle a").click(function()
            {
                $(this).parent().toggleClass("catbox_active");
                $(".catbox ul").slideToggle();
            });
        });
        </script>

        <style>
        .catbox
        {
            width: 250px;
            border: 1px solid #000;
            padding: 5px;
            position: relative;
            float: left;
        }

        .catbox ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        </style>
    </head>

    <body id="">
        <h1></h1>

        <div class="catbox">
            <div class="catbox_toggle"><a href="#">Categories</a></div>
            <ul>
                <li><a href="#1">Link 1</a></li>
                <li><a href="#2">Link 2</a></li>
                <li><a href="#3">Link 3</a></li>
                <li><a href="#4">Link 4</a></li>
            </ul>
        </div>

    </body>
<html>

或者，如果你告诉我如何用我所拥有的代码来完成我想做的事情，那也会有所帮助。

Answer 1

试

.catbox
{
padding: 5px;
position: relative;
display:inline-block;
zoom:1;
*display:inline;
}
.catbox ul
{
margin: 0;
padding: 0;
list-style: none;
position:absolute;
top:20px;
}

Answer 2

查看来自jQuery Menu的filament group（jQueryUI的原始创作者）。 This似乎正是您所需要的。

是否有一个jquery插件可以做得更好？文本下拉列表（不是菜单）

2 个答案: