Guzel Menu Css

body{
   background-color: #ecf5fe;
}
Ve kodların geri kalanı.

ul, ul li, ul li a{
   padding: 0;
   margin: 0;
   color: #383838;
}
ul li {
   display: block;
   list-style: none;
   float: left;
   padding: 2px;
   margin: 3px;
   border: 2px solid #000;
   border-radius: 5px;
   width: 100px;
   text-align: center;
}
ul li a {
   display: block;
   text-decoration: none;
   position: relative;
   padding: 2px;
   font-size: 15px;
   font-weight: 900;
}
ul li ul {
   visibility: hidden;
   position: absolute;
   opacity: 0;
   margin: 5px;
}
ul li ul li {
   float: none;
}
ul li:hover ul{
   visibility: visible;
   opacity: 1;
   display: block;
   position: absolute;
   transition: all ease .3s;
}
ul li a:hover{
   background-color: #ffb3b3;
   color: #5f83ff;
   border-radius: 5px;
}