Выпадающи меню css

<style>



.topmenu {
  backface-visibility: hidden;
  background: ;
}
.topmenu > li {
  display: inline;
 position:absolute; 
}
.topmenu > li > a {
  font-family: 'Exo 2', sans-serif;
  height: 0px;
  line-height: 0px;
  padding: 0 0px;
  font-weight: bold;
  color: #003559;
  text-transform: uppercae;
  transition: .4s ease-in-out;
}

.topmenu li a:hover {
color: #E6855F;
content: "X";
  margin-left: 8px;
font-family: FontAwesome;
}
.submenu {
overflow:hidden;
margin-top:5px;
visibility: hidden;
  opacity: 0;
  z-index: 9999;
  background: white;
  border: 2px solid gray;
position: absolute;
  left: -270;
  width: 300px;
max-wigth:500px;
 transform: perspective(600px) rotateX(-60deg);
  transform-origin: 0% 0%;
  transition: .6s ease-in-out; 
}
.topmenu > li:hover .submenu {
  visibility: visible;
  opacity: 1;
    transform: perspective(600px) rotateX(0deg);
}
.submenu a:link {
max-width: 500px;
  color: black;
  font-size: 13px;
padding: 5px;
  font-family: 'Kurale', serif;
  transition: .4s ease-in-out;
}

</style>
<body>

<i class="topmenu">&#8195;
<li><a href="#" ><font size="4px"><i class="fa fa-smile-o"></i></font></a>
      <i class="submenu">
        <a href="#">смайлики скоро появиться</a>
      </i>
    </li>
     </i>
</body>