Sliding Wordpress search form OVER the menu)?

Question

css

There is a form. How to make the search pop up on top of the menu here: cg91812-wordpress-3.tw1.ru/??
The code is added to the menu via functions.php:

// menu-search-form.
function add_search_to_wp_menu ( $items, $args ) {
 if( 'primary' === $args -> theme_location ) {
$items .= '<li class="menu-item menu-item-search">';
$items .= '<form method="get" class="menu-search-form" action="' . get_bloginfo('home') . '/"><p><input class="text" type="text" value="Кто Ищет, Тот Найдет !" name="s" id="s" onfocus="if (this.value == \'Кто Ищет, Тот Найдет !\') {this.value = \'\';}" onblur="if (this.value == \'\') {this.value = \'Кто Ищет, Тот Найдет !\';}" /><input type="submit" class="my-wp-search" id="searchsubmit" value="&#128269;" /></p></form>';
$items .= '</li>';
 }
return $items;

}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

style.css:
.menu-item-search {
position: absolute;
width: 50px
height: 50px;
opacity: .71;
z-index:;
-moz-transition: width 180ms;
-o-transition: width 180ms;
-webkit-transition: width 180ms;
transition: width 180ms}
media screen and (max-width: 892px) {
.menu-item-search {
display: none;}}
.menu-item-search:hover {
width: 250px;
opacity: 1;}
.my-wp-search {
width: 50px;
height: 50px;}
.text{
color: #fff;
}
#s {
background :#d3d6c3;
color: #000;
height: 50px;
width: 250px
border: 6px solid #f0522b;
}
#searchsubmit {
cursor: pointer;
width: 50px
height: 50px;
margin: 0 0 0 -50px;
background: #f0522b;
font-style: normal
font-size:16px;}
.menu-header li:last-child{background:none;padding:0px 0px;}
.menu-header li:last-child:hover{background:none;padding:0px 0px;}
/ * MENU SEARSH */
Thank you!

Answer 1

.menu-header li:nth-last-child(2) { margin-right: 53px!important; }
.menu-item-search { position: absolute!important; top: 0; right: 0; }