Searching...
Thursday, January 1, 2015
Home » HTML » Silver Salmon Button Dropdown

Silver Salmon Button Dropdown

January 01, 2015

Drop Down Menu Css 

  <style type="text/css">
  #cssmenu{padding:0;margin:0;
  border:0
  }
  #cssmenu ul,
  #cssmenu li{list-style:none;
  margin:0;
  padding:0
  }
  #cssmenu ul{position:relative;
  z-index:597
  }
  #cssmenu ul li{float:left;
  min-height:1px;vertical-align:middle
  }
  #cssmenu ul li.hover,
  #cssmenu ul li:hover{position:relative;
  z-index:599;
  cursor:default
  }
  #cssmenu ul ul{visibility:hidden;
  position:absolute;
  top:100%;
  left:0;
  z-index:598;
  width:100%
  }
  #cssmenu ul ul li{float:none
  }
  #cssmenu ul ul ul{top:0;
  left:100%
  }
  #cssmenu ul li:hover > ul{visibility:visible
  }
  #cssmenu ul ul{margin-top:0
  }
  #cssmenu a{display:block;
  line-height:1em;
  text-decoration:none
  }
  #cssmenu ul li.last ul{left:auto;
  right:0
  }
  #cssmenu ul li.last ul ul{left:auto;
  right:99.5%
  }
  #cssmenu:after,
  #cssmenu ul:after{content:'';
  display:block;
  clear:both
  }
  /* Custom CSS Styles */
  #cssmenu{width:auto;
  font-family:Helvetica,Arial,sans-serif
  }
  #cssmenu:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
  background-color:#606a77;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4f5864),color-stop(1,#49515b));
  background-image:-webkit-linear-gradient(top,#4f5864,#49515b);
  background-image:-moz-linear-gradient(top,#4f5864,#49515b);
  background-image:-o-linear-gradient(top,#4f5864,#49515b);
  background-image:linear-gradient(#4f5864,#49515b);
  -moz-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;
  -webkit-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;
  box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;
  content:'';display:block;
  height:8px
  }
  #cssmenu > ul{border-bottom:1px solid #252A30;border-top:1px solid #252A30;
  -moz-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);
  -webkit-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);
  box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
  background-color:#566171;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6e7d8f),color-stop(1,#404854));
  background-image:-webkit-linear-gradient(top,#6e7d8f,#404854);
  background-image:-moz-linear-gradient(top,#6e7d8f,#404854);
  background-image:-o-linear-gradient(top,#6e7d8f,#404854);
  background-image:linear-gradient(#6e7d8f,#404854);
  height:27px;
  padding:15px 15px 15px 5px
  }
  #cssmenu > ul > li{margin:0 10px
  }
  #cssmenu > ul > li.has-sub:hover > a{-moz-border-radius:3px 3px 0 0;
  -webkit-border-radius:3px 3px 0 0;
  border-radius:3px 3px 0 0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box
  }
  #cssmenu > ul > li:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);
  background-color:#e2e2e2;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#c8c8c8));
  background-image:-webkit-linear-gradient(top,#fff,#c8c8c8);
  background-image:-moz-linear-gradient(top,#fff,#c8c8c8);
  background-image:-o-linear-gradient(top,#fff,#c8c8c8);
  background-image:linear-gradient(#fff,#c8c8c8)}#cssmenu > ul > li.active:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);
  background-color:#cb7b72;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f49b8e),color-stop(1,#bd584d));
  background-image:-webkit-linear-gradient(top,#f49b8e,#bd584d);
  background-image:-moz-linear-gradient(top,#f49b8e,#bd584d);
  background-image:-o-linear-gradient(top,#f49b8e,#bd584d);
  background-image:linear-gradient(#f49b8e,#bd584d)
  }
  #cssmenu ul a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);
  background-color:#c2c2c2;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f1f1),color-stop(1,#a8a8a8));
  background-image:-webkit-linear-gradient(top,#f1f1f1,#a8a8a8);
  background-image:-moz-linear-gradient(top,#f1f1f1,#a8a8a8);
  background-image:-o-linear-gradient(top,#f1f1f1,#a8a8a8);
  background-image:linear-gradient(#f1f1f1,#a8a8a8);
  -moz-border-radius:3px;-webkit-border-radius:3px;
  border-radius:3px;-moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);
  color:#3c444d;
  font-size:12px;
  line-height:27px;
  padding:0 20px;
  position:relative;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,0.4)
  }
  #cssmenu ul ul{width:170px
  }
  #cssmenu ul ul a{-moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  -moz-border-radius:0;
  -webkit-border-radius:0;border-radius:0;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  line-height:150%
  }
  #cssmenu ul .active > a{color:#FFF;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);
  background-color:#c46a60;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ef7260),color-stop(1,#b04c41));
  background-image:-webkit-linear-gradient(top,#ef7260,#b04c41);
  background-image:-moz-linear-gradient(top,#ef7260,#b04c41);
  background-image:-o-linear-gradient(top,#ef7260,#b04c41);
  background-image:linear-gradient(#ef7260,#b04c41)
  }
  #cssmenu ul .has-sub{position:relative
  }
  #cssmenu ul .has-sub ul{-moz-border-radius:0 3px 3px 3px;
  -webkit-border-radius:0 3px 3px 3px;border-radius:0 3px 3px 3px;
  -moz-background-clip:padding;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  -moz-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);
  -webkit-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);
  box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;
  background-color:#c3c3c3;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e9e9e9),color-stop(1,#aaa));
  background-image:-webkit-linear-gradient(top,#e9e9e9,#aaa);
  background-image:-moz-linear-gradient(top,#e9e9e9,#aaa);
  background-image:-o-linear-gradient(top,#e9e9e9,#aaa);
  background-image:linear-gradient(#e9e9e9,#aaa);
  padding:3px 0
  }
  #cssmenu ul .has-sub ul a{background:none;
  padding:8px 8px 8px 16px;
  border-bottom:1px solid transparent;
  text-align:left
  }
  #cssmenu ul .has-sub ul .has-sub a:after{content:none
  }
  #cssmenu ul .has-sub li:hover > a{border-bottom:1px solid #1D2024;
  color:#FFF;
  background-color:#55616f;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#56606f),color-stop(1,#3f4852));
  background-image:-webkit-linear-gradient(top,#56606f,#3f4852);
  background-image:-moz-linear-gradient(top,#56606f,#3f4852);
  background-image:-o-linear-gradient(top,#56606f,#3f4852);
  background-image:linear-gradient(#56606f,#3f4852);
  -moz-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;
  -webkit-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;
  box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;
  position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,0.4)
  }
  #cssmenu ul .has-sub li:hover > a:after{border-left:0 none;
  background-color:#c35f54;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ea5f51),color-stop(1,#a9463b));
  background-image:-webkit-linear-gradient(top,#ea5f51,#a9463b);
  background-image:-moz-linear-gradient(top,#ea5f51,#a9463b);
  background-image:-o-linear-gradient(top,#ea5f51,#a9463b);
  background-image:linear-gradient(#ea5f51,#a9463b);
  -moz-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;
  -webkit-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;
  box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;
  content:'';
  height:100%;
  width:6px;
  position:absolute;
  right:0;top:0
  }
  #cssmenu ul .has-sub > a{padding-right:0
  }
  #cssmenu ul .has-sub > a:after{content:'▼';border-left:1px solid rgba(100,100,100,0.2);
  color:#5D6A7A;-moz-box-shadow:-1px 0 0 rgba(255,255,255,0.2);
  -webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.2);
  box-shadow:-1px 0 0 rgba(255,255,255,0.2);
  display:inline-block;
  font-size:9px;
  margin-left:5px;
  text-align:center;
  height:25px;
  width:24px;
  text-shadow:0 -1px 0 #101417
  }
  #cssmenu ul .active > a:after{color:#FFF
  }
  #cssmenu ul ul a{font-size:12px
  }
     </style>

menus Links


<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

div css


  <style type="text/css">
#div {
 
    padding: 0px 25px 25px;
    background: #fff;
    box-shadow: 
        0px 0px 0px 5px rgba( 255,255,255,0.4 ), 
        0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
 margin: 20px 300px 100px 200px;
   width: 1150px;
   height:400px;
}
    </style>

edit this div


<div  id="div">
<h1>Div Middle <br>WRITE YOUR WEBSITE CONTENT HERE </h1>

<img src="https://lh6.googleusercontent.com/-xA2R1yIkZXA/VKV2H9EUruI/AAAAAAAAAKw/0Ro-IhzLXMA/w1142-h516-no/java9r.png"/>

</div>
By at January 01, 2015
Labels:
Share:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

ads2