Question

我有一个截图，我必须在HTML，CSS和JS中复制。

此时此刻，我可以在http://localhost:8080/po/logout中复制此内容。

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

HTML：

Route::get('/about', function () {
    return view('pages.about');
})->middleware('auth');

CSS ：

<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>

问题陈述：

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

我想知道屏幕截图的箭头标记中标记了哪些更改.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; }。

Answer 1

将padding-top: 20px;添加到.dropdown选择器可以为我实现结果。

这是updated fiddle

Answer 2

添加padding-top和top:2px将其向上移动以从上半部分开始，然后将cursor: pointer;添加到elipsis（不是必需但很好），你可以添加padding-bottom以在最后一个文字后添加空格，并使用box-shadow添加一些阴影以使其弹出，这是一个小提琴：https://jsfiddle.net/nc2djn5p/31/

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

2 个答案: