Membuat Menu Dropdown Dengan HTML CSS - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Membuat Menu Dropdown Dengan HTML CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel html, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Menu Dropdown Dengan HTML CSS
link : Membuat Menu Dropdown Dengan HTML CSS

Baca juga


Membuat Menu Dropdown Dengan HTML CSS

 


Assalamualaikum sobat , sebelumnya selamat tahun baru 2015 , di tahun 2015 ini saya akan berbagi sedikit ilmu untuk membuat menu dropdown dengan html dan css , semoga pembelajaran dasar ini bermanfaat bagi kita semua , langsung saja ya sobat , silahkan belajar


Code HTML

<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="img/icon.png">
<title>Muhammad Rizky Fauzi</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<center><img src="img/header.jpg" align="center"></center>
</div>
<div id="container">

<ul class="menu">
<li>
<a href="">Home</a>
<ul class="dropdown">
<li><a href="">Perusahaan</a></li>
<li><a href="">Crew Kin Radio</a></li>
<li><a href="">Data Teknik</a></li>
</ul>
</li>
<li>
<a href="">Contact</a>
<ul class="dropdown">
<li><a href="">Berita</a></li>
<li><a href="">Hiburan</a></li>
</ul>
</li>
<li>
<a href="">About</a>
<ul class="dropdown">
<li><a href="">Lokal</a></li>
<li><a href="">Publik</a></li>
</ul>
</li>
<li>
<a href="">Download</a>
<ul class="dropdown">
<li><a href="">Teknologi</a></li>
<li><a href="">Kesehatan</a></li>
<li><a href="">Politik</a></li>
</ul>
</li>
<li>
<a href="">Artikel</a>
<ul class="dropdown">
<li><a href="">Pop Indonesia</a></li>
<li><a href="">Dangdut</a></li>
<li><a href="">Islami</a></li>
<li><a href="">Barat</a></li>
</ul>
</li>
</ul>
<div class="footer">
<img src="img/footer.jpg">
</div>

</div>
</body>
</html>

Code CSS

body{
background: #332fde;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.header{
padding-top: 2px;
}
#container{
width: 862px;
height: 900px;
border: 1px solid #fff;
margin: 0 auto;
}
.titre{
text-align: center;
font-family: "Century Gothic", helvetica, sans-serif;
color: #fff;
font-size: 3.0em;
text-shadow: 0px 0px 12px #ccc;
}
.menu{
background:#fff;
}
.menu > li{
display: inline-block;
vertical-align: top;
width: 172px;
border-right: 0px solid #000;
height: 40px;
margin: 0 -3.4px 0 0;
}
.menu > li a{
display: block;
color: #000;
text-decoration: none;
font-family: "Calibri", helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
width: inherit;
height: inherit;
border: 0px solid #fff;
text-align: center;
line-height: 40px;
}
.menu > li:hover a{
background-color: #449;
color: #fff;
}
.menu > li .dropdown{
background-color: rgba(0, 0, 0, 0.2);
display: none;
}
.menu > li:hover > .dropdown{
display: block;
}
.menu > li .dropdown > li{
width: inherit;
height: 40px;
}
.menu > li .dropdown > li > a{
display: block;
width: inherit;
height: inherit;
font-size: 14px;
font-family: "Calibri", helvetica, sans-serif;
border: 0px solid #fff;
line-height: 40px;
padding: 0 0 0 5px;
color: #fff;
text-align: left;
}
.menu > li > .dropdown > li:hover > a{
background: #333453; 
color: #fff;
}
#footer{
    width:1000px;
    height:50px;
    border-bottom:silver 1px solid;
    position:absolute;
    bottom:-340px;
    text-align: center;
    background-color:#fff;
}
.footer{
height: 20px;
width: 20px;
position: absolute;
bottom: -483px;
}

sekian dan terima kasih


Demikianlah Artikel Membuat Menu Dropdown Dengan HTML CSS

Sekianlah artikel Membuat Menu Dropdown Dengan HTML CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Menu Dropdown Dengan HTML CSS dengan alamat link https://dev-create.blogspot.com/2023/09/membuat-menu-dropdown-dengan-html-css.html