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.

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