javascript - 如何增加css中下拉菜单的高度？

Question

我在下面有一张截图，我必须用 HTML、CSS 和 JS 复制它。

此刻，我可以在 fiddle 中复制它.

我用于下拉菜单的 HTML 和 CSS 代码是:

HTML:

<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
        <div style="">
            <img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
            <div class="dropdown">
                <li><a href="#">View Status</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
                <li><a href="#">Release Bills</a></li>
                <li><a href="#">Add Attendee</a></li>
                <li><a href="#">Export as</a></li>
                <li><a href="#">View in Google Sheets</a></li>
                <li><a href="#">Send Notifications</a></li>
            </div>
        </div>


    </form>
</div>

CSS:

.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}

input[type=text] {
    width: 100%;
    background: #10314c;
}

.dropdown {
    background-color: #FFFFFF;
    display: none;
    padding-left: 2%;
    position: absolute;
    height: 150px;
    right: 0;
    width: 200px;
    z-index: 10;
    list-style-type: none;
}

.dropdown a {
    color: #676767;
    font-weight: bold;
    font-size: 16px;
}

.dropdown li:hover {
    background-color: #EDEDED;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    border: 1px #FFFFFF;
    z-index: 2;
}

问题陈述:

我的 fiddle 中的问题是，如果我单击三个点，下拉菜单将从搜索栏的底部开始。

我想知道我需要在 CSS 代码中做哪些更改，以便它从搜索栏的上部开始，如屏幕截图的箭头符号所示。

Answer 1

添加一个 padding-top 和 top:2px 将其从上部开始向上移动，并添加一个 cursor: pointer; 到 elipsis(不是必需的，但很好)，你可以添加 padding-bottom 以在最后一个文本之后添加空格，并使用 box-shadow< 添加一些阴影 让它流行起来，这是一个 fiddle :https://jsfiddle.net/nc2djn5p/31/