Macam - Macam Menu Dropdown CSS & HTML Code

Dropdown Style 1

Code Style :

.cssmenu li:first-child a { border-left: none; }
.cssmenu li:last-child a{ border-right: none; }

.cssmenu li:hover > a { color: #8fde62; }

.cssmenu ul {
 position: absolute;
 top: 40px;
 left: 0;
 opacity: 0;
 background: #1f2024;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.cssmenu li:hover > ul { opacity: 1; }
.cssmenu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;
 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.cssmenu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}
.cssmenu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;
 border: none;
 border-bottom: 1px solid #353539;
}
.cssmenu ul li:last-child a { border: none; }
.cssmenu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXqyM5WznYb8P_Fd8PQ9zGuGUICFCuDh1VLWMAX6pkpafjwEAle7RP9dhEcp3Oirz7V7qNhkcdE4Eb-YvLet2xcvJCXXYabz7-cwTqRjrZneSi5D8qxM8u6i8pWJof6VqseQYPjGgukes/s1600/docs.png) no-repeat 6px center; }
.cssmenu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujA7S95Dldgg8SB7XGIdZayPw_DnMIzqr4AlvEuCmJKWq_c7vsRnUwtmuTsT-dMYn5JHC1lHeqA9bPdbyA4CA8XDzpMwHX6CX7wi10ExA6XGzqeIW5_tV6F4jGVhJvnnZ3w6G6Z895Xcg/s1600/bubble.png) no-repeat 6px center; }
.cssmenu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxoaGqr5hSosl1yatNvkW2LT6CBDFAMu0SOgeJ6E2-PqkcB1Dtnr2VuB6xwr6TxT4q5hgpl6olDIupyVA14q9E9YogINFgTliMaV2L2x5RDhReYgvhvEcxx3i9Dpv1GtjuVZCnQCQC6A4/s1600/arrow.png) no-repeat 6px center; }

</style>
<ul class="cssmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Likes</a></li>
<li><a href="#">Views</a>

<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Sign Out</a></li>
</ul>
</li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<br />

Dropdown Style 2

Code Style :

.cf:after {
      clear: both;
  }

.cf {
      *zoom: 1;
  }

.menu,
  .submenu {
   margin: 0;
   padding: 0;
   list-style: none;
  }

.menu {   
   margin: 50px auto;
   width: 800px;   
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content; 
  }

.menu > li {
   background: #34495e;
   float: left;
   position: relative;
   transform: skewX(25deg);
  }

.menu a {
   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
  }

.menu li:hover {
   background: #e74c3c;
  }

.menu > li > a {
   transform: skewX(-25deg);
   padding: 1em 2em;
  }

/* Dropdown */
  .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   transform: skewX(-25deg);
   transform-origin: left top;
  }

.submenu li {
   background-color: #34495e;
   position: relative;
   overflow: hidden;  
  }

.submenu > li > a {
   padding: 1em 2em;   
  }

.submenu > li::after {
   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;   
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
  }

.submenu > li:nth-child(odd){
   transform: skewX(-25deg) translateX(0);
  }

.submenu > li:nth-child(odd) > a {
   transform: skewX(25deg);
  }

.submenu > li:nth-child(odd)::after {
   right: -50%;
   transform: skewX(-25deg) rotate(3deg);
  }

.submenu > li:nth-child(even){
   transform: skewX(25deg) translateX(0);
  }

.submenu > li:nth-child(even) > a {
   transform: skewX(-25deg);
  }

.submenu > li:nth-child(even)::after {
   left: -50%;
   transform: skewX(25deg) rotate(3deg);
  }

/* Show dropdown */
  .submenu,
  .submenu li {
   opacity: 0;
   visibility: hidden;   
  }

.submenu li {
   transition: .2s ease transform;
  }

.menu > li:hover .submenu,
  .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
  }

.menu > li:hover .submenu li:nth-child(even){
   transform: skewX(25deg) translateX(15px);   
  }

.menu > li:hover .submenu li:nth-child(odd){
   transform: skewX(-25deg) translateX(-15px);   
  }
</style>

<br />
<ul class="menu cf">
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
<li>
        <a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a>
        <ul class="submenu">
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
</ul>
<div>

Dropdown Style 3

Code Style :

display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;

border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;

white-space:nowrap;}

#bt_tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; }

#bt_tabmenu li ul li:last-child a {border-radius: 0  0 0.5em 0.5em ;}

#bt_tabmenu ul {display:table;margin:0;padding:0;position:absolute;

left:-9999px;z-index:1;top:1.6em;}

#bt_tabmenu  > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}

#bt_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}

#bt_tabmenu li a , #bt_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);

display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}

#bt_tabmenu li a  {box-shadow: 0px 3px 10px  -5px black;float:right;}

#bt_tabmenu p {position:relative;height:1.6em;}

#bt_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}

#bt_tabmenu p:focus:after {content:'';}

#bt_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;

color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;

padding-right:5px;}

#bt_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}

#bt_tabmenu ul a:focus , #bt_tabmenu p:focus + ul li a {margin-left:9999px;}

#bt_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}

:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}

[tabindex] {cursor:pointer;}

#bt_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}

#bt_tabmenu ul ul a {margin-left:-9999px;}

#bt_tabmenu ul ul li a:focus  {margin-left:19998px;}

#bt_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}

#bt_tabmenu ul li a:focus.fermoir  + ul {

margin-left:10001px;}

#bt_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;

padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}

.fermoir:before {display:none;}

#bt_tabmenu ul li .fermoir:focus , p#bt_tabmenu {color:white;}

</style>
<div id="bt_tabmenu">
<li><p tabindex="0" onclick="" >
Menu List <a href="#" tabindex="-1" title=""# class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><p tabindex="0"  onclick="">
Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a></p>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>

Dropdown Style 4

Code Style :

border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;

}  
 #cssmenu_litemenu ul {  
 float: left;  
 width: 100%;  
 }  
 #cssmenu_litemenu li {  
 float: left;  
 list-style-type: none;  
 }  
 #cssmenu_litemenu li a {  
 background:#166bea;  
 color: #fff;  
 display: block;  
 font-size: 14px;  
 padding: 5px 17px 5px 15px;  
 position: relative;  
 text-decoration: none;  
 }  
 #cssmenu_litemenu li a:hover {  
 background:#002660;  
 color: #fff;  
 }  
 #cssmenu_litemenu li li a {  
 background: none;  
 background-color: #0d56c4;  
 border: 1px solid #0d408d;  
 border-top-width: 0;  
 color: #fff;  
 font-size: 14px;  
 padding: 5px 10px;  
 position: relative;  
 text-transform: none;  
 width: 130px;  
 }  
 #cssmenu_litemenu li li a:hover {  
 background: none;  
 background-color: #166bea;  
 }  
 #cssmenu_litemenu li ul {  
 height: auto;  
 left: -9999px;  
 margin: 0 0 0 -1px;  
 position: absolute;  
 width: 160px;  
 z-index: 9999;  
 }  
 #cssmenu_litemenu li:hover ul {  
 left: auto;  
 }  
</style>
<div id="cssmenu_litemenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
<li><a href="#"> Menu 4</a></li>
<li><a href="#"> Menu 5</a></li>
<li><a href="#"> Menu 6</a></li>
<li><a href="#"> Menu 7</a></li>
<li><a href="#"> Menu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>

Pengunjung Online

Labels

Macam - Macam Menu Dropdown CSS & HTML Code

1 komentar:

Popular Posts

Test Footer

Random post

Terpopuler