jquery - 向下滑动菜单，但不会移动其他所有内容

Question

我所有的代码都可以工作，但它并没有按照我想要的方式工作。所以，我想制作一个菜单栏，当我将鼠标悬停在其中的一部分上时，它会通过从项目下方滑出来显示选项，但是，这不会将其他菜单项向下推。

如果你不明白我的意思，你可以复制代码。

这是我的代码：

$(document).ready(function () {
    $('.selector').mouseenter(function () {
        $(this).find('> ul').slideToggle('fast');
    });
    $('.selector').mouseleave(function () {
        $(this).find('> ul').slideToggle('fast');
    });
});

* {
    border: 1px solid black;
}
body {
    width: 98%;
}
#title {
    text-align: center;
    font-size: 250%;
}
#menu_Bar {
    margin: 0.01%;
}
.sel_name {
    font-size: 70%;
    text-align: center;
}
.empty {
    list-style: none;
}
.options {
    display: none;
    background-color: lightblue;
}
.selector {
    background-color: transparent;
    display: inline-block;
    width: 19%;
}

<h1 id='title'>Welcome to My Site</h1>
    <div id='menu_Bar'>
        <div class='selector'>
            <p class='sel_name'>Home
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>

                        </li>
                        <li><a href=''>option 2</a>

                        </li>
                        <li><a href=''>option 3</a>

                        </li>
                        <li><a href=''>option 4</a>

                        </li>
                        <li><a href=''>option 5</a>

                        </li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>Shows
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>

                        </li>
                        <li><a href=''>option 2</a>

                        </li>
                        <li><a href=''>option 3</a>

                        </li>
                        <li><a href=''>option 4</a>

                        </li>
                        <li><a href=''>option 5</a>

                        </li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>Search
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>

                        </li>
                        <li><a href=''>option 2</a>

                        </li>
                        <li><a href=''>option 3</a>

                        </li>
                        <li><a href=''>option 4</a>

                        </li>
                        <li><a href=''>option 5</a>

                        </li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>About the Owner
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>

                        </li>
                        <li><a href=''>option 2</a>

                        </li>
                        <li><a href=''>option 3</a>

                        </li>
                        <li><a href=''>option 4</a>

                        </li>
                        <li><a href=''>option 5</a>

                        </li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>FAQ
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a>

                        </li>
                        <li><a href=''>option 2</a>

                        </li>
                        <li><a href=''>option 3</a>

                        </li>
                        <li><a href=''>option 4</a>

                        </li>
                        <li><a href=''>option 5</a>

                        </li>
                    </ul>
        </div>
</div>

Answer 1

我已经更改了 CSS 类.selector。我添加了float:leftanddisplay:block而不是inline-block，使您的内容与悬停的内容一起使用。

这是更新的代码：

.selector {
    background-color: red;
    display: block;
    float: left;
    width: 19%;
}

在这里找到演示

Answer 2

给id选择器并使用position: absolute;

我还修正了你的错别字。

这是我的演示