LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
/* 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;
}

Description

Cara Membuat Menu Dropdown dengan CSS di Blog
Term
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv