Как оживить поисковую строку?

Question

Blender0 @Blender0

CSS

Как оживить поисковую строку?

Проблема заключается в том, что не работает наведение поисковая строка - при наведении курсором на неё ничего не происходит, хотя в css записал для неё cursor: pointer, и также прописал этот же код и для логотипа, но при наведении на него ничего не происходит.

Песочница.

<!DOCTIPE html>
<html>
	<head>
		<title>BlenderMag - магазин цифровых товаров</title>
		<link href="C:\Users\User\Desktop\BlenderMag\style.css" rel="stylesheet">
		<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
		<script type="text/javascript">
$(document).ready(function() {
  //Для липкого меню
  $(window).scroll(function() {
    if ($(this).scrollTop() >= 90) {
      $("nav").addClass("fix");
    } else {
      $("nav").removeClass("fix");
    }
  });
});
</script>
	</head>

<body>
<div class="container">
  <nav>
    <ul>
      <li><a href="glavnaya.html">Главная</a></li>
      <li><a href="garan.html">Гарантии</a></li>
      <li><a href="otz.html">Отзывы</a></li>
      <li><a href="kakbiy.html">Как купить?</a></li>
    </ul>
  </nav>
  </div>
		<div id="space">
			<div class="logo"><a href="glavnaya.html"><img src="img/logo.png" width="200px" height="64px"></a></div>
			<div id="footer"></div>
			<form class="example" action="/action_page.php">
			  <input type="text" placeholder="Введите ваш запрос" name="search">
			  <button type="submit"><i class="fa fa-search">Поиск</i></button>
			</form>
		</div>
	</body>



</html>

/* Меню */
 body {
  height:1000px;
}
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a {
  text-decoration: none;
  color:#a9a1ff;
}

.container {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  text-align: center;
}
ul>li {
  display: inline-block;
}
ul>li a {
  display: block;
  padding: 15px;
}
ul>li a:hover{
  color:white;
}

main {
  text-align: justify;
}
nav {
  background:black;
  transition:all 1s linear;
  top: -30px;
  opacity:100%;
}
nav.fix {
  position: fixed;
  width: 100%;
  max-width: 1000px;
  transition:all .5s linear;
  top: 0;
  background:black;
} 
/* Фон */
body {
background-image:url(img/fon.jpg);
background-attachment:fixed;
  margin: 0;
  padding: 0;
}
/* ПОДВАЛ */
#footer {
	position:absolute;
    left: 0; bottom: 0; /* Левый нижний угол */
    background: #0e0e0e; /* Цвет фона */
    color: #fff; /* Цвет текста */
    width: 100%; /* Ширина слоя */
	height:300px;
	}
/* ОСНОВНОЙ БЛОК */
#space {
margin: 0 auto;
position:relative;
left: 0; bottom: 0;
background: white;
width: 999px;
height:2500px;
z-index:-1;
}
/* LOGO */
.logo {
position:absolute;
bottom:97%;
left:2%;
}
/* ====== ПОИСКОВАЯ СТРОКА ====== */
form.example input[type=text] {
	position:absolute;
	bottom:97.2%;
	left: 35%;
    padding: 8px;
    font-size: 17px;
    border: 1px solid grey;
    float: right;
    width: 40%;
    background: #f1f1f1;
}

form.example button {
	position:absolute;
	bottom:97.2%;
	left: 27%;
    float: left;
    width: 8%;
    padding: 8px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
}

form.example button:hover {
    background: #0b7dda;
}

form.example::after {
    content: "";
    clear: both;
    display: table;
}