如何在实心矩形栏内制作动画搜索表单？

Question

我有一个截图如下所示，我必须在HTML / CSS中复制。

此时，我可以在fiddle中复制此内容（没有搜索图标和周围的白色方形矩形）。

我用来制作蓝色实心矩形条的HTML和CSS代码是：

HTML：

<div class="nav-top-searchbar">
    <form>

        <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;
    cursor: pointer;
}

#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;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 0 0 15px #888;
    top: 2px;
}

问题陈述：

我想知道我需要在上面的CSS代码中进行哪些更改以便在点击搜索图标时，搜索图标周围的白色方框应该会展开。在深蓝色实心矩形栏内有点类似于this（但它应该在深蓝色实心矩形条内）。

在我的小提琴中，我能够制作深蓝色实心矩形条。