Cara Membuat Menu DropDown Dengan Css

Mintailmu.com – Cara Membuat Menu DropDown Dengan Css Di Website Dan Blogspot – bagi teman-teman yang ingin mengetahui bagaimana cara membuat menu dropdown dengan css dan html agar lebih mudah dan gampang dibuat.

Hal pertama yang harus teman-teman punyai yaitu text editor di mana text editor ini digunakan untuk memepermudah teman-teman mengedit script ini.

Langsung saja buka text editor yang teman-teman miliki, jika teman-teman membuat menu dropdown ini pada blogspot teman-teman buka Tema dan klik Edit HTML, kalau langsung ke website teman-teman buat aja file baru dengan nama index.html dengan script html berikut ini :

<link rel="stylesheet" href="style.css">
<!-- Start menu multi dropdown Mintailmu.com-->
<nav>
<ul class='menutop' id='mainmenu'>
<li class='menutop'><a href='#' title='Home'>Home</a>
</li>
<li class='menutop'><a href='#' title='Mintailmu.com'>Mintailmu.com</a>
</li>
<li class='menutop'><a href='#' title='Product Info'>Product info</a>
<ul>
<li><a href='#'>Features</a>
</li>
<li><a href='#' title='Installation'>Installation</a>
<ul>
<li><a href='#'>Description of files</a>
</li>
<li><a href='#'>How to setup</a>
</li>
</ul>
</li>
<li><a href='#'>Parameters info</a>
</li>
<li><a href='#' title='Supported browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
<li><a href='#'>CSS3 info</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Samples'>Samples</a>
<ul>
<li><a href='#'>Android template</a>
</li>
<li><a href='#'>Mac template</a>
</li>
<li><a href='#' title='Mercury template'>Mercury template</a>
<ul>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Lilac theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
</ul>
</li>
<li><a href='#'>Elegant template</a>
</li>
<li><a href='#' title='Poin Template'>Point template</a>
<ul>
<li><a href='#'>Aquamarine theme</a>
</li>
<li><a href='#'>Blue theme</a>
</li>
<li><a href='#'>Green theme</a>
</li>
<li><a href='#'>Grey theme</a>
</li>
<li><a href='#'>Orange theme</a>
</li>
<li><a href='#'>Red theme</a>
</li>
</ul>
</li>
<li><a href='#' title='Toolbars template'>Toolbars template</a>
</li>
</ul>
</li>
<li class='menutop'><a href='#' title='Supported Browsers'>Supported browsers</a>
<ul>
<li><a href='#'>Firefox</a>
</li>
<li><a href='#'>Internet Explorer</a>
</li>
<li><a href='#'>Opera</a>
</li>
<li><a href='#'>Safari</a>
</li>
<li><a href='#'>Google Chrome</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- End menu multi dropdown -->

Dan kita akan membuat script CSSnya, kalau teman-teman buat di blogspot teman-teman cari script dengan code </script>dan copy code di bawah ini pas di atas code </script> , kalau teman-teman membuatnya di website, kamu bisa buat file baru dengan nama style.css dan copy script di bawah ini :

/* Menu Multi Dropdown */

ul#mainmenu {
margin: 0 auto;
list-style: none;
padding: 0;
background-color: #201816;
width: 100%
}

ul#mainmenu ul {
margin: 0 auto;
list-style: none;
padding: 0;
background-color: #201816
}

ul#mainmenu ul {
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
opacity: 0;
-moz-transition: all 0.5s;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s, visibility 0.5s;
transition: opacity 0.5s;
background-color: #CB4E48;
padding: 0 7px 0
}

ul#mainmenu li:hover>ul {
visibility: visible;
opacity: 1;
}

ul#mainmenu li {
position: relative;
display: block;
white-space: nowrap;
float: left;
}

ul#mainmenu li:hover {
z-index: 1;
}

ul#mainmenu ul ul {
position: absolute;
left: 100%;
top: 0;
}

ul#mainmenu {
z-index: 999;
position: relative;
display: inline-block;
padding: 0;
}

* html ul#mainmenu li a {
display: inline-block;
}

ul#mainmenu>li {
margin: 0;
}

ul#mainmenu a:active,
ul#mainmenu a:focus {
outline-style: none;
}

ul#mainmenu a {
display: block;
vertical-align: middle;
text-align: left;
text-decoration: none;
font: 16px Arial, sans-serif;
color: #000000;
cursor: pointer;
padding: 17px 20px;
background-repeat: repeat;
}

ul#mainmenu ul li {
float: none;
margin: 7px 0 0;
}

ul#mainmenu ul a {
text-align: left;
padding: 5px 15px;
background-color: transparent;
color: #EDC1BF;
text-decoration: none;
text-shadow: 0 1px 1px #BE3C36;
}

ul#mainmenu li:hover>a,
ul#mainmenu li a.pressed {
color: #FFFFFF;
text-decoration: none;
}

ul#mainmenu img {
border: none;
vertical-align: middle;
margin-right: 17px;
}

ul#mainmenu ul span {
background-image: none;
padding-right: 5px;
}

ul#mainmenu ul li:hover>a,
ul#mainmenu ul li a.pressed {
background-color: #BC433D;
color: #ffffff;
text-decoration: none;
text-shadow: 0 1px 1px #BE3C36;
}

ul#mainmenu li.menutop>a {
background-color: #201816;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
color: #988989;
}

ul#mainmenu li.menutop:hover>a,
ul#mainmenu li.menutop a.pressed {
background-color: #CB4E48;
color: #FFFFFF;
}

Nah setelah itu simpan atau save dan lihat hasilnya.

See the Pen Menu Dropdown by Minta Ilmu (@Mintailmu) on CodePen.

Tag : Cara Membuat Menu DropDown Dengan Css Di Website Dan Blogspot, membuat menu dropdown html, membuat menu di website

1 thought on “Cara Membuat Menu DropDown Dengan Css”

Leave a Comment