Friday 20 December 2013

DROP DOWN MENU EXAMPLES




---------------------------------------------------------------------------------------
USE THIS CODE
short code css menu
Different Color for Menu Tabs
------------------------------------------------------------------------------------------
.menu-item-1 a {background:#0A4B73;color:#fff;}
.menu-item-2 a {background:#2192BF;color:#fff;}
.menu-item-3 a {background:#964962;color:#fff;}
.menu-item-4 a {background:#FF7D80;color:#fff;}
.menu-item-5 a {background:#A88D5B;color:#fff;}
.menu-item-6 a {background:#CC8116;color:#fff;}
.menu-item-7 a {background:#A2A632;color:#fff;}
.menu-item-8 a {background:#A13E52;color:#fff;}
.menu-item-9 a {background:#465E73;color:#fff;}
.menu-item-10 a {background:#FF7D80;color:#fff;}
.menu-item-11 a {background:#A2A632;color:#fff;}
<li class="menu-item-1"><a href="">Home</a></li>
<li class="menu-item-2"><a href="">Blog</a></li>
<li class="menu-item-3"><a href="">Themes</a></li>
----------------------------------------------------------------------------------
CSS CODE TYMPANUS. TRANSITION
https://tympanus.net/TipsTricks/FastHoverSlideshow/
http://jsfiddle.net/2vLjU/1/
https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp
------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<!-- saved from url=(0051)https://TYMPANUS.net/TipsTricks/FastHoverSlideshow/ -->
<html>
<head>
<style>
.hs-wrapper{
width: 333px;
height: 500px;
position: relative;
margin: 0 auto;
overflow: hidden;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.hs-wrapper img{
top: 0px;
left: 0px;
position: absolute;
-webkit-animation: showMe 0.8s linear infinite 0s forwards;
-moz-animation: showMe 0.8s linear infinite 0s forwards;
-o-animation: showMe 0.8s linear infinite 0s forwards;
-ms-animation: showMe 0.8s linear infinite 0s forwards;
animation: showMe 0.8s linear infinite 0s forwards;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
.hs-wrapper img:nth-child(1){
z-index: 9;
}
.hs-wrapper img:nth-child(2){
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
-ms-animation-delay: 0.1s;
animation-delay: 0.1s;
z-index: 8;
}
.hs-wrapper img:nth-child(3){
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
z-index: 7;
}
.hs-wrapper img:nth-child(4){
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
animation-delay: 0.3s;
z-index: 6;
}
.hs-wrapper img:nth-child(5){
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
z-index: 5;
}
.hs-wrapper img:nth-child(6){
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
z-index: 4;
}
.hs-wrapper img:nth-child(7){
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-nimation-delay: 0.6s;
animation-delay: 0.6s;
z-index: 3;
}
.hs-wrapper img:nth-child(8){
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
-ms-animation-delay: 0.7s;
animation-delay: 0.7s;
z-index: 2;
}
.hs-wrapper:hover img{
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
.hs-overlay{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 500;
background: rgba(0,0,0,0.6);
box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;
pointer-events: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.hs-overlay span{
display: block;
padding: 20px;
position: absolute;
width: 293px;
left: 20px;
top: 200px;
color: #fff;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
font-size: 38px;
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(255,255,255,0.3);
text-align: center;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hs-wrapper:hover .hs-overlay{
opacity: 1;
box-shadow: 0 0 0 5px rgba(255,255,255,0.3) inset;
}
@-webkit-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@-moz-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@-o-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@-ms-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
@keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}
</style>
</head>
<body>
<section>
<div class="hs-wrapper">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/1.jpg" alt="image01">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/2.jpg" alt="image02">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/3.jpg" alt="image03">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/4.jpg" alt="image04">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/5.jpg" alt="image05">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/6.jpg" alt="image06">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/7.jpg" alt="image07">
<img src="https://tympanus.net/TipsTricks/FastHoverSlideshow/images/8.jpg" alt="image08">
<div class="hs-overlay">
<span>Summer <strong>2012</strong></span>
</div>
</div>
</section>
</div>
</body>
</html>
----------------------------------------------------------------------------------
IMAGE OVERLAY SLIDE ANOTHER IMAGE
READ MORE
https://codepen.io/ivanhjc/pen/ZdPWRo
https://codeshack.io/css3-image-overlay-effects-example/
http://jsfiddle.net/2vLjU/1/
https://tympanus.net/TipsTricks/FastHoverSlideshow/
https://www.tutorialspoint.com/how-to-create-image-overlay-hover-slide-effects-with-css
https://www.w3schools.com/howto/howto_css_image_overlay_slide.asp
------------------------------------------------------------------------------------------------------------
<html>
<!-- 
https://www.tutorialspoint.com/how-to-create-image-overlay-hover-slide-effects-with-css 
USE SAME SIZE IMAGE
https://www.w3schools.com/css/img_5terre.jpg
https://www.w3schools.com/css/img_forest.jpg
-->
<head>
<style>
.card-container {
position: relative;
width: 50%;
}
img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
bottom: 100%;
background-color: rgb(55, 74, 179);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease-in-out;
}
.card-container:hover .overlay {
bottom: 0;
height: 100%;
}
.caption {
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Slide Example</h1>
<div class="card-container">
<img src="https://www.w3schools.com/css/img_5terre.jpg">
<div class="overlay">
<img src="https://www.w3schools.com/css/img_forest.jpg">
</div>
</div>
</body>
</html>
 ----------------------------------------------------------------------------------
CSS CODE TRANSITION
------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:1s;
}
.twitter:hover{
background-position:-32px 63px; 
}
</style>
</head>
<body>
<div href="https://twitter.com/georgevere12" class="twitter">
</body>

</html>

-------------------------------------------------------------------------------------------------------------
ONE CLICK DROP DOWN MENU CSS
------------------------------------------------------------------------------------------------------------
<html>
<!-- http://www.script-tutorials.com/demos/133/index.html# -->
<head>
<style>
#nav,#nav ul {
background-image:url(http://www.script-tutorials.com/demos/133//images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
#nav {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#nav > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
overflow:hidden;
}
#nav li a.fly {
background:#c1c1bf url(http://www.script-tutorials.com/demos/133/images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#nav ul li {
margin:0;
}
#nav ul li a {
width:120px;
}
#nav ul li a.fly {
padding-right:10px;
}
#nav li:hover > a {
background-color:#858180;
color:#fff;
}
#nav li a:focus {
outline-width:0;
}
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a class="fly" href="#">Tutorials</a>
<ul class="dd">
<li><a href="#">HTML / CSS</a></li>
<li><a class="fly" href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
<body>
</html>

 ------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
OR USE THIS CODE FOR MENU NAVIGATION IN DIFFERENT COLOR
------------------------------------------------------------------------------------------------------------

<html>
<head>
<style type="text/css">
ul,li,nav {
border:0pt none;
font:inherit;
margin:0pt;
padding:0pt;
}
nav {
display:block;
}
ol,ul {
list-style:none outside none;
}
a {
text-decoration:none;
}
.wrap {
width:100%;
margin:auto;
}
.nav {
background-color:#333;
height:49px;
text-align:center;
position:inherit;
width:100%;
left:0;
z-index:999;
-moz-transition:top 0.4s ease;
-webkit-transition:top 0.4s ease;
-o-transition:top 0.4s ease;
-ms-transition:top 0.4s ease;
transition:top 0.4s ease;
}
.overlay:hover ~ .nav,.nav:hover {
top:0;
}
.navigation {
display:inline-block;
}
.navigation li {
display:inline;
}
.navigation a {
display:block;
float:left;
font-family:helvetica,arial,sans-serif;
color:#fff;
font-size:12px;
height:100%;
line-height:49px;
text-transform:uppercase;
padding:0 40px;
font-weight:bold;
-moz-transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-ms-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.navigation li:nth-child(1) a:hover {
background-color:#ff9000;
}
.navigation li:nth-child(2) a:hover {
background-color:#73e900;
}
.navigation li:nth-child(3) a:hover {
background-color:#992ff3;
}
.navigation li:nth-child(4) a:hover {
background-color:#38eec5;
}
.navigation li:nth-child(5) a:hover {
background-color:#ff6000;
}
.navigation li:nth-child(6) a:hover {
background-color:#008aff;
}
.navigation li:nth-child(7) a:hover {
background-color:#ff0096;
}
.navigation li:nth-child(8) a:hover {
background-color:#ff3939;
}
.botright {
text-align:right;
width:480px;
float:right
}
#menu-module {
background:#DDD;
width:100%
}
#menu-wrapper {
background:#DDD;
font-size:14px;
width:999px;
margin:0 auto
}
#main_menu {
background:#fff;
list-style-type:none;
text-align:left;
margin:0;
padding:0
}
.top_menu {
float:left;
position:relative;
border-right:1px solid #E8EBED
}
#main_menu a {
background-color:#888;
color:#0000FF;
display:block;
padding:0 15px;
text-decoration:none;
height:45px;
line-height:45px
}
#main_menu a:hover {
color:#444
}
#main_menu a {
background:#DDD
}
#main_menu ul {
list-style:none;
position:absolute;
display:none;
margin-left:-41px;
z-index:999
}
#main_menu ul li:first-child a {
border-top:1px solid #E8EBED;
}
#main_menu ul li {
}
#main_menu li:hover ul {
display:block
}
#main_menu li ul a {
font-size:15px;
height:35px;
line-height:35px;
min-width:120px;
border-bottom:1px solid #E8EBED;
border-left:1px solid #E8EBED;
border-right: 1px solid #E8EBED
}
</style>
<div class='nav'>
<div class='wrap'>
<ul class='navigation'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Tourist</a></li>
<li><a href='#'>Tech</a></li>
<li><a href='#'>Life</a></li>
<li><a href='#'>Asian</a></li>
<li><a href='#'>Travel US</a></li>
<li><a href='#'>Travel</a></li>
<li><a href='/'>Style</a></li>
</ul>
</div></div>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
DROP DOWN MENU CSS:  ZIKAZEV BLUE ,  KANGISMET


--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
#menu {
background:#f0f0f0;
border:1px solid #ddd;
color:#ddd;
height:35px;
font-family:Oswald, Arial, sans-serif;
width:1090px;
margin:0 auto;
}

#menu ul,#menu li {
list-style:none;
margin:0 auto;
padding:0;
}

#menu ul {
height:35px;
width:1100px;
}

#menu li {
float:left;
display:inline;
position:relative;
font:bold 14px Arial;
text-transform:uppercase;
font-weight:400;
}

#menu a {
display:block;
line-height:35px;
text-decoration:none;
color:#77778b;
font-family:Oswald, Arial, sans-serif;
text-shadow:0 1px 0 #fff;
padding:0 14px;
}

#menu li a {
border-right:1px solid #e5e5e5;
}

#menu li a:hover {
color:#444;
background-color:#e5e5e5;
-webkit-transition:all .3s ease-in;
-moz-transition:all .3s ease-in;
-o-transition:all .3s ease-in;
transition:all .3s ease-in;
}

#menu input {
display:none;
width:80px;
height:30px;
opacity:0;
cursor:pointer;
margin:0;
padding:0;
}

#menu label {
font-size:20px;
display:none;
width:35px;
height:20px;
line-height:20px;
text-align:center;
color:#77778b;
}

#menu label span {
font:normal 14px Oswald;
position:absolute;
left:35px;
}

#menu ul.menus {
height:auto;
overflow:hidden;
width:180px;
background:#f0f0f0;
border-top:1px solid #e5e5e5;
border-left:1px solid #e5e5e5;
border-bottom:1px solid #e5e5e5;
position:absolute;
z-index:99;
display:none;
left:-1px;
}

#menu ul.menus li {
display:block;
width:100%;
font-size:13px;
text-transform:none;
text-shadow:none;
}

#menu ul.menus a {
color:#77778b;
text-transform:uppercase;
}

#menu li:hover ul.menus {
display:block;
}

#menu a.dropdown {
padding:0 27px 0 14px;
}

#menu a.dropdown::after {
content:"";
width:0;
height:0;
position:absolute;
top:14px;
right:9px;
border-color:#9292a2 transparent transparent;
border-style:solid;
border-width:6px 5px;
}

#menu ul.menus a:hover {
background:#ddd;
color:#333;
}
</style>
</head>
<body>

<nav id='menu'>
<input type='checkbox'/>
<label><i class='icon-reorder'></i><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='dropdown' href='#'>Drop Menu</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a class='dropdown' href='#'>Drop Menu 1</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
DROP DOWN MENU
http://freebiesdesign.com/10-simple-css-drop-down-menu/
-----------------------------------------------------------------------------------------------------------------------



--------------------------------------------------------------------------------------------------------------------------
CODE:1
--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>handy-HTML.com - Create a simple CSS dropdown menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">This is a project</a></li>
<li><a href="#">So is this</a></li>
<li><a href="#">and this</a></li>
<li><a href="#">don't forget this too</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Quote</a></li>
<li><a href="#">General Enquiry</a></li>
</ul>
</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
CODE 2
--------------------------------------------------------------------------------------------------------------------------


----------------------------------------------------------------------------------------------------------------------

<html>
<head>
<style type="text/css">
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #646464 url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */  
*width: 100%;
}
#cssmenu li ul li {
text-align: center;
}
#cssmenu li ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
</style>

</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
CODE :3

 --------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JankoAtWarpSpeed demos: Create dropdown menus with CSS only</title>
<style type="text/css">
body { font-family:Arial, Sans-Serif; font-size:13px; margin:0px;
background: transparent url(page_bkg.png) repeat scroll top center;}
h1 {margin:0px; padding:20px 0 0 20px;}
p {padding:20px; color:#dcdcdc;}
p a {color:#9BD800;}
p a:hover {color:#B6FF00;}
#header { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
</style>
</head>
<body>
<div id="header">
<h1>JankoAtWarpSpeed demos</h1>
<ul id="nav">
<li><span>Menu 1</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>          
<li><span>Menu 3</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
CODE:4





--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JankoAtWarpSpeed demos: Create dropdown menus with CSS only</title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style>
</head>
<body>
<div id="header">
<ul id="drop-nav">
<li><a href="#">Support</a></li>
<li><a href="#">Web Design</a></li>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">Content Management</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">General Inquiries</a></li>
<li><a href="#">Ask me a Question</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
CODE:5

--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JankoAtWarpSpeed demos: Create dropdown menus with CSS only</title>
<style type="text/css">
/* NAV MENU CODE */
#navMenu li {
background:red;
float: left;
position: relative;
padding: 4px 10px 4px 10px;
}
#navMenu  li a{
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000
}
/* THIS CODE CHANGE MENU INTO DROP DOWN MENU */
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/* NAV MENU CODE */
</style>
</head>
<body>
<div id='navMenu'>
<ul>
<li class='first'><a href='/'>Home</a></li>
<li><a href='#'>Drop Menu 1 &#187;</a>
<ul>
<li><a href='#' title='Edit Me'>Child Menu 1.1</a></li>
<li><a href='#' title='Edit Me'>Child Menu 1.2</a></li>
<li><a href='#' title='Edit Me'>Child Menu 1.3</a></li>
</ul>
</li>
<li><a href='/'>Drop Menu 2 &#187;</a>
<ul>
<li><a href='#' title='Edit Me'>Child Menu 2.1</a></li>
<li><a href='#' title='Edit Me'>Child Menu 2.2</a></li>
<li><a href='#' title='Edit Me'>Child Menu 2.3</a></li>
</ul>
</li>
<li><a href='/'>Drop Menu 3 &#187;</a>
<ul>
<li><a href='#' title='Edit Me'>Child Menu 3.1</a></li>
<li><a href='#' title='Edit Me'>Child Menu 3.2</a></li>
<li><a href='#' title='Edit Me'>Child Menu 3.3</a></li>
</ul>
</li>
<li> <a href='#'>Products</a>
<ul>
<li><a href='#'>Wet Suit</a></li>
<li><a href='#'>Vacuum Cleaner</a></li>
<li><a href='#'>Pill Box</a></li>
<li><a href='#'>Knee Socks</a></li>
<li><a href='#'>Pirate Hat</a></li>
<li><a href='#'>Kilt</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

SIMPLE AND SHORT DROP DOWN MENU 2

http://arthurdejong.org/cssmenu/














These are more or less my notes of an effort to implement a very simple dropdown-like menu that is implemented purely in HMTL and CSS.
It is currently not tested for cross-browser compatibility (it apprears not to work in MS IE 5.0) but it should work in most Mozilla-based browsers. If you have any improvements, please send me an email.
This is just a small demo of an idea I had for useing CSS in a menu, it is not really production-quality just proof-of-concept.

First try

This solution basically trims the list items to the height of one line if the mouse is not over the list item. This causes the menu to expand one level if the mouse is over an item.

the CSS

ul.menu li {
  display: block;
  width: auto;
  height: 1em;
  overflow: hidden;
}

ul.menu li:hover {
  height: auto;
  overflow: visible;
}

the HTML

<ul class="menu">
  <li>
    Item1
    <ul>
      <li>Item1.1</li>
      <li>
        Item1.2
        <ul>
          <li>Item1.2.1</li>
          <li>Item1.2.2</li>
          <li>Item1.2.3</li>
        </ul>
      </li>
      <li>
        Item1.3
        <ul>
          <li>Item1.3.1</li>
          <li>Item1.3.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item2</li>
</ul>

the result

  • Item1
    • Item1.1
    • Item1.2
      • Item1.2.1
      • Item1.2.2
      • Item1.2.3
    • Item1.3
      • Item1.3.1
      • Item1.3.2
  • Item2

open issues and notes

  • if you move from the Item1.2 to the Item1.3 option the 1.2 submenu collapses moveing the 1.3 option and collapsing the whole menu (probably)
  • there is a margin or padding problem somewhere makeing the normal height not 1em
  • the whole menu should be a lot prettier

Second try

This tries to make an effort of only showing the menu if an option is clicked. This solution only shows the lists if they have a pointer over them or have their parent activated. The HTML code is the same as in the previous example.

the CSS

ul.menu ul {
  display: none;
  position: relative;
  bottom: 1em;
  padding-top: 1em;
}

ul.menu li:active ul {
  display: block;
}

ul.menu ul:hover {
  display: block;
}

the result

  • Item1
  • Item2

open issues and notes

  • if the new sublist shows up it does not automatically have the hover property, you have to move the mouse first (causing an ugly selection)
  • activating an item completely opens the menu, not just one level (using the > CSS child selector did not work for some reason)
  • the whole menu should be a lot prettier





These are more or less my notes of an effort to implement a very simple dropdown-like menu that is implemented purely in HMTL and CSS.
It is currently not tested for cross-browser compatibility (it apprears not to work in MS IE 5.0) but it should work in most Mozilla-based browsers. If you have any improvements, please send me an email.
This is just a small demo of an idea I had for useing CSS in a menu, it is not really production-quality just proof-of-concept.

First try

This solution basically trims the list items to the height of one line if the mouse is not over the list item. This causes the menu to expand one level if the mouse is over an item.

the CSS

ul.menu li {
  display: block;
  width: auto;
  height: 1em;
  overflow: hidden;
}

ul.menu li:hover {
  height: auto;
  overflow: visible;
}

the HTML

<ul class="menu">
  <li>
    Item1
    <ul>
      <li>Item1.1</li>
      <li>
        Item1.2
        <ul>
          <li>Item1.2.1</li>
          <li>Item1.2.2</li>
          <li>Item1.2.3</li>
        </ul>
      </li>
      <li>
        Item1.3
        <ul>
          <li>Item1.3.1</li>
          <li>Item1.3.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item2</li>
</ul>

the result

  • Item1
    • Item1.1
    • Item1.2
      • Item1.2.1
      • Item1.2.2
      • Item1.2.3
    • Item1.3
      • Item1.3.1
      • Item1.3.2
  • Item2

open issues and notes

  • if you move from the Item1.2 to the Item1.3 option the 1.2 submenu collapses moveing the 1.3 option and collapsing the whole menu (probably)
  • there is a margin or padding problem somewhere makeing the normal height not 1em
  • the whole menu should be a lot prettier

Second try

This tries to make an effort of only showing the menu if an option is clicked. This solution only shows the lists if they have a pointer over them or have their parent activated. The HTML code is the same as in the previous example.

the CSS

ul.menu ul {
  display: none;
  position: relative;
  bottom: 1em;
  padding-top: 1em;
}

ul.menu li:active ul {
  display: block;
}

ul.menu ul:hover {
  display: block;
}

the result

  • Item1
  • Item2

open issues and notes

  • if the new sublist shows up it does not automatically have the hover property, you have to move the mouse first (causing an ugly selection)
  • activating an item completely opens the menu, not just one level (using the > CSS child selector did not work for some reason)
  • the whole menu should be a lot prettier
--------------------------------------------------------------------------------------------------------------------------
DROP DOWN MENU SHORT CODE WITH LI & A
--------------------------------------------------------------------------------------------------------------------------



--------------------------------------------------------------------------------------------------------------------------
CODE:6
--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>handy-HTML.com - Create a simple CSS dropdown menu</title>
<style type="text/css">
a {
color: #DA4B4B;
text-decoration: none;
}

li {
background:Green;
float: left;
position: relative;
border-top: 1px solid #ffffff;
border: 5px solid yellow;
outline: 5px solid blue;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
height:30px;
width:150px;
display:block;
color:#000;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
color:#FFF;
text-shadow:1px 1px 1px #000
}
/*MAKE DROPDOWN EFFECT*/
ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
ul li:hover ul {
visibility:visible;
z-index:9999;
}

</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">This is a project</a></li>
<li><a href="#">So is this</a></li>
<li><a href="#">and this</a></li>
<li><a href="#">don't forget this too</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Quote</a></li>
<li><a href="#">General Enquiry</a></li>
</ul>
</li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
AMAZON DROP DOWN MENU
http://docs.aws.amazon.com/silk/latest/developerguide/hover-menu.html
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
------------------------------------------------------------------------------------------------------------------------

Create Drop-down Menus for a Touch Screen

Because Amazon Silk runs on a touch-screen device, it doesn't handle the CSS pseudoclass :hover the same way that a desktop browser does. On a desktop browser, :hover becomes a match when you move the pointer over an element on which :hover is set. This behavior is useful for drop-down menus, as you can create a menu that's hidden until the user hovers over the parent element. But on a touch screen, this sort of hover-based menu design can lead to problems.
Let's look at an example. The following HTML document contains two unordered lists, one nested within the other. Each <li> element contains a link.
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="dropdown.css">
  </head>
  <body>
    <div class="nav">
      <ul>
        <li><a href="http://example.com/">Home</a></li>
        <li><a href="http://example.com/">About</a></li>
        <li class="more"><a href="http://example.com/">Nav</a>    
          <ul>
            <li><a href="http://example.com/">Item 1</a></li>
            <li><a href="http://example.com/">Item 2</a></li>
            <li><a href="http://example.com/">Item 3</a></li>
          </ul>
        </li>
        <li><a href="http://example.com/">Contact</a></li>
        <li><a href="http://example.com/">Press</a></li>
      </ul>
    </div>
  </body>
</html>
By applying CSS to this markup, we can create a simple drop-down navigation. Here's our style sheet:
div.nav ul {
    padding: 0;
    margin: 0;        
    list-style-type: none;
}

div.nav ul li {
    color: #FFF;
    padding: 15px;
    font-size: 20px;
    border-right: 2px #FFF solid;
    border-bottom: 1px #FFF solid;
    float:left;
    background-color:#335A7F;
    width: 110px;
}

div.nav ul li a {
    color: #FFF;
    text-decoration: none;
}
 
div.nav li:hover {
    background-color: #4C88BF; 
}
 
div.nav ul li ul { 
    display:none; 
}
 
div.nav ul li:hover ul {
    display: list-item;
    position: absolute;
    margin-top: 14px;
    margin-left: -15px;
}
 
div.nav ul li:hover ul li {
    float:none;
}

div.nav ul li ul li:hover {
    float:none;
    background-color: #66B5FF; 
}

li.more:after {
    content: "\00BB";
    float: right;
    margin-right: 7px;
}
Notice how the display property is used. First, we use display:none to hide the nested <ul>, and then we use the :hover state to trigger display:list-item, which overrides the first display and shows us the nested <ul>. The result, rendered on a desktop browser, is shown below.
A single <li> contains both a hidden list and a link. To display the drop-down menu, you hover over the appropriate <li>. To follow a link, you click the <a> element within the appropriate <li>. In other words, you need to register two different events under the same parent element. This works fine as long as you're using a mouse, which supports both hovering and clicking. But Silk relies on a single gesture—a tap—to represent both hovering and clicking. As a result, a user might tap an element with the intention of showing menu items, and the effect would be to follow the link. That's a potentially frustrating user experience.
There are several ways to avoid this problem. One possibility, given the prevalence of touch-screen devices, is simply not to use menus that are dependent on a hover state. Another option is to detect touch-screen devices and then deliver a different, touch-optimized menu. Similarly, you can use scripting to alter the way that the menu responds to touch events. Superfish, a jQuery plugin, provides such a solution.
In the following example page, which is distributed by Superfish and is shown here rendered by Silk on a Kindle Fire HDX, the drop-down menus open on tap.
--------------------------------------------------------------------------------------------------------------------------
MINIMIZE AMAZON MENU CODE BY FAIZA KHAN
--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>

*{
margin:0;
padding:0;
}

.nav{
background-color:yellow;
width:100px;
}

.nav li{
border: 2px solid red;
height:15px;
width:130px;
}

div.nav ul li nav {
display:none;
}
div.nav ul li:hover nav {
display: block;
}
</style>

</head>

<html>
<body>

<div class="nav">

<ul>

<li class="nav"><a>Nav</a>  <!--HOW LI HOVER NAV -->

<nav>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</nav>

</li>

</ul>

</div>

</body>
</html>
-------------------------------------------------------------------------------------------------------------------
I DELETE  UL TAG IN UPPER CODE  ITS WORKS
-------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>

*{
margin:0;
padding:0;
}

.nav{
background-color:yellow;
width:100px;
}

.nav li{
border: 2px solid red;
height:15px;
width:130px;
}

div.nav li nav {
display:none;
}
div.nav li:hover nav {
display: block;
}
</style>

</head>

<html>
<body>

<div class="nav">

<li class="nav"><a>Nav</a>

<nav>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</nav>

</li>

</div>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
I CHANGE NAVE INTO BUTTON IT WORKS
IN THIS CODE BUTTON HOVER NAV
--------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>

*{
margin:0;
padding:0;
}

.button{
background-color:yellow;
width:100px;
}

.button li{
border: 2px solid red;
height:15px;
width:130px;
}

div.button li nav {
display:none;
}
.button li:hover nav {
display: block;
}
</style>

</head>

<html>
<body>

<div class="button">

<li class="button"><a>Nav</a>    <!--HOW BUTTON HOVER NAV -->

<nav>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</nav>

</li>

</div>

</body>
</html>
-----------------------------------------------------------------------------------------------------------------
OR USE THIS BY SIMPLE BUTTON WITHOUT CLASS ID
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
button{
border: 2px solid red;
height:30px;
width:130px;
display: block;
}
</style>
</head>
<body>
<button>BUTTON</button>

</body>
</html>
------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>

*{
margin:0;
padding:0;
}

button{
border: 2px solid red;
height:30px;
width:130px;
display: block;
}
.btn{
background-color:yellow;
width:100px;
}

.btn li{
border: 2px solid red;
height:15px;
width:130px;
}

.btn li button {
display:none;
}
.btn li:hover button {
display: block;
}
</style>

</head>

<html>
<body>

<div class="btn">

<li class="btn"><a>Nav</a>

<button>
<button>BUTTON</button>
<button>BUTTON</button>


</button>

</div>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
--------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>

*{
margin:0;
padding:0;
}

button{
border: 2px solid red;
height:30px;
width:130px;
display: block;
}
.btn{
border: 2px solid red;
background-color:yellow;
height:15px;
width:130px;
}

.btn li button {
display:none;
}


.btn li:hover button {
display: block;
}
</style>

</head>

<html>
<body>

<div class="btn">

<li class="btn"><a>Nav</a>

<button>BUTTON</button>

</div>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
HOW DIV TAG HOVER BUTTON AND MAKE INVISIBLE  TO VISIBLE
WITHOUT UL OR LI TAG & WITHOUT ANY CLASS OR ID
-------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>

/* MARGIN AND PADDING  ZERO REMVOVE ANY SPACE */

*{
margin:0;
padding:0;
}

 /* MAKE BUTTON AND MAKE BUTTON INVISIBLE */

button{
height:30px;
width:130px;
display: block;
}
button {
display:none;
}

/*HOW DIV TAG HOVER BUTTON AND MAKE VISIBLE BUTTON WITHOUT UL OR LI TAG */

div{
list-style-type: none;
text-align: center;
border: 2px solid red;
background-color:yellow;
height:15px;
width:130px;
}

/*HOVER CODE MAKE DROPDOWN EFFECT */

div:hover button {
display: block;
}

</style>

</head>

<html>

<body>

<div>

<p>HOME</p>

<button>BUTTON</button>
<button>BUTTON</button>

</div>


</body>
</html>

------------------------------------------------------------------------------------------------------------
http://www.w3schools.com/css/css_dropdowns.asp
------------------------------------------------------------------------------------------------------------

Demo: Dropdown Examples

Move the mouse over the examples below:
Dropdown Text
Other: Trolltunga Norway

Basic Dropdown

Create a dropdown box that appears when the user moves the mouse over an element.

Example

<style>
.dropdown {
    position: relative;
    display: inline-block;}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;}

.dropdown:hover .dropdown-content {
    display: block;}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
Try it Yourself »

Example Explained

HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element.
Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it.
Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
CSS) The .dropdown class use position:relative, which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute).
The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:autoto enable scroll on small screens).
Instead of using a border, we have used the CSS3 box-shadow property to make the dropdown menu look like a "card".
The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Dropdown Menu

Create a dropdown menu that allows the user to choose an option from a list:
This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:

Example

<style>
/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
Try it Yourself »

Right-aligned Dropdown Content

If you want the dropdown menu to go from right to left, instead of left to right, add right: 0;

Example

.dropdown-content {
    right: 0;}
Try it Yourself »
Examples

More Examples

Dropdown Image

How to add an image and other content inside the dropdown box.
Hover over the image:
Trolltunga Norway 
Try it Yourself »

Dropdown Navbar

How to add a dropdown menu inside a navigation bar.
Try it Yourself »



Posted by on Friday 20 December 2013 at 03:36
Labels: , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets