Cara Membuat Menu Vertikal dan Hover dengan CSS

Assalamualaikum Wr. Wb.

Semangat Pagi..!!!

Hai kawan blogger, hari ini saya akan share tentang cara membuat menu vertikal dan hover di web dengan CSS.

Apa sih arti dari hover itu?

Pengertian:

Arti hover dalam internet, hover dalam bahasa Indonesia bisa diartikan "melayang-layang".Dimaksudkan bahwa ketika kita akan mengeklik sebuah link/tautan dan saat kursor berada diatas link dan kita belum melakukan klik , warna link akan berubah dari warna aslinya.

Alat dan Bahan:

Laptop/ komputer.
Sublime Text.

Maksud dan Tujuan:

Untuk memperindah tampilan pada web.

Langkah - langkah pembuatan:

Buka sublime text,
ketikkanlah script dibawah ini:

<html>
<head>
    <title>Latihan Dasar</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="head">

</div>
<div id="kiri">
    <ul id="simple">
    <li><a href="#">Home</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
</div>
<div id="nav">

</div>
<div id="foot">
</div>

</body>
</html>

Script CSS:

#head {
    background-color: black;
    height: 100px;
    width: 100%;
    border-radius: 15px ;
    border-bottom: 8px solid #F39C12;
    }


#kiri{
    background-color: #19B5FE;
    height: 400px;
    width: 15%;

    border-radius: 15px;
}
#nav{
    background-color: #C5EFF7;
    width: 85%;
    height: 400px;
    margin-left: 140px;
    border-radius: 15px;
    margin-top: -400px;
}
#simple {
    margin: 0;
    padding: 5px;
    width: 140px;
    border-radius: 5px;
}

#simple li {
    background: linear-gradient(-45deg, #19B5FE, #005ddc);
    border-bottom: 3px solid #000;
    list-style: none;
    padding: 0.9em;
    text-align: center;
    width: 100px;
}
#simple li:hover {
    background: linear-gradient(-45deg, yellow, #5ca1ff);
}

#simple li a {
    color: black;
    display: block;
    text-decoration: none;

}