如何使我的输入框轮廓消失？

Question

当我将鼠标悬停在按钮上时，它显示输入框(shown in picture number 1)我的代码是这样写的：

.search-btn{
    position: relative;
    top: 30%;
    left: 30%;
    transform: translate(-50%,-50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}



.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: black;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

.search-btn:hover{
    width: 200px;
    cursor: pointer;
}

.search-btn:hover .search-txt {
  display: inline-block;
 }

 .search-txt {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;;
    height: 42.5px;
    line-height: 50px;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
 }
 
.search-btn:hover .fa{
    background: #941313;
    color: white;
}

我摆脱边界的唯一方法是，如果我删除search-btn：hover .search-txt中的{display：inline-block}并添加{border：none}等，但是这样就完全可以了摆脱输入框本身，我无法在其中输入任何内容(shown in picture 2)

我在做什么错？谢谢您的提前帮助。

Answer 1

顺便说一下，我的html是这样写的（都在标题内）

<nav>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="stories.html">Stories</a></li>
          <li>
            <a href="resources.html">Resources and Campaigns</a>
          </li>
          <li><a href="contact.html">Contact</a></li>
           
  <li><div class="search-btn">
    <input class="search-txt" type="search" name="" placeholder="Type to search">
    <i class="fa fa-search"></i>
   </div>
  </li>      
   

</ul>
</nav>